zoukankan      html  css  js  c++  java
  • 微信 小程序组件 分页精简版

    1xml

    <view class="container flex-wrap flex-direction-row">
      <!-- left aside -->
      <view class="aside flex-wrap flex-direction-col">
        <block wx:key="navList" wx:for="{{navList}}">
          <text class="type-nav {{curNav == item.id ? 'selected' : ''}}" bindtap="selectNav" data-index="{{index}}" data-id="{{item.id}}">{{item.name}}</text>
        </block>
      </view>

      <!-- content -->
      <view class="content flex-item">
        <block wx:key="ishesList" wx:for="{{dishesList[curIndex]}}">
          <view class="dish " data-dish="{{item.id}}">
            <view>
              <text class="title">{{item.name}}</text>
              <p>¥{{item.price}}</p>
            </view>
          </view>
        </block>
      </view>
    </view>
     
     
    2,js
    // -------------------------------------------------------
    curNav: 1,
    curIndex: 0,
    navList: [
    {
    id: 1,
    name: '热销菜品'
    },
    {
    id: 2,
    name: '热菜'
    },
    {
    id: 3,
    name: '凉菜'
    },
    ],
    dishesList: [
    [
    {
    name: "红烧肉",
    price: 38,
    num: 1,
    id: 1
    }
    ],
    [
    {
    name: "小炒日本豆腐",
    price: 18,
    num: 1,
    id: 3
    }
    ],
    [
    {
    name: "大拌菜",
    price: 18,
    num: 1,
    id: 5
    }
    ]
    ],
    // 分页菜单函数
    selectNav:function(event) {
    let id = event.target.dataset.id,
    index = parseInt(event.target.dataset.index);
    self = this;
    this.setData({
    curNav: id,
    curIndex: index
    })
    },
    // ------------------------------------------------------
    3ss
    .aside{
      100%;
      border-right: 1px solid #ddd;
      font-size: .85rem;
    }
    .type-nav{
      position: relative;
      padding:.7rem .3rem;
      text-align: center;
      border-bottom: 1px solid #ddd;
      z-index: 10;
    }
    .type-nav.selected{
      margin-right: -1px;
      padding-left:-1px;
      color: #333;
    }
    .content{
    }

    .dish{
      margin-left: 1rem;
      padding: 1rem;
      border-bottom: 1px solid #ddd;
    }
    .dish .title{
      display: block;
      font-size: 1rem;
    }
    .dish p{
      color: orange;
      font-size: .75rem;
    }
    .dish .add-btn{
       3rem;
      text-align: right;
    }

    .cart{
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 1rem;
      background: #ddd;
    }
  • 相关阅读:
    ll command not found 当ll无法识别的解决办法
    idea控制台全屏
    查看centos版本号
    java Error: 无法访问org.apache.http.annotation.ThreadSafe 找不到org.apache.http.annotation.ThreadSafe的类文件
    DigestUtils.md5Hex()加密
    JAVA 8 '::' 关键字
    CVE-2020-1472 NetLogon特权提升漏洞
    OpenSSH的scp命令注入漏洞(CVE-2020-15778)
    redis未授权访问漏洞&简单利用&总结
    常见web信息泄露
  • 原文地址:https://www.cnblogs.com/dianzan/p/7518931.html
Copyright © 2011-2022 走看看