微信 小程序组件 分页精简版
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->{{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;
}
