微信 小程序组件 分页精简版

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{

  width: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{

  width: 3rem;

  text-align: right;

}

.cart{

  display: block;

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  padding: 1rem;

  background: #ddd;

}

转载于:https://www.cnblogs.com/dianzan/p/7518931.html