微信 小程序组件 分页菜单带下划线焦点切换
<view class="container">
<!-- menue -->
<view class="aside flex">
<block wx:key="navList" wx:for="{{navList}}">
<view class="type-nav flexca" bindtap="selectNav" data-index="{{index}}" data-id="{{item.id}}">
<view class='flexda'>
<text class="{{curNav == item.id ? 'selected' : ''}}">{{item.name}}</text>
<view class="{{curNav == item.id ? 'selected' : ''}}"></view>
</view>
</view>
</block>
</view>
<!-- content -->
<view class="content">
<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>
//------------------------------------------
.aside{
border-bottom: 1px solid #f7f7f7;
}
.type-nav{
width: 33.33%;
/* text-align: center; */
height: 88rpx;
">#fff;
}
.type-nav>view text{
color: #333;
margin-bottom: 20rpx;
margin-top: 10rpx;
font-size: 34rpx;
}
.type-nav>view view{
width: 48rpx;
border-bottom: 4rpx solid transparent;
}
.aside .type-nav>view .selected{
color: #19ad17;
border-color: #19ad17;
}
//----------------------------------------------------------
data: {
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 (e) {
// console.log(e.currentTarget.dataset.id)
let id = e.currentTarget.dataset.id,
index = parseInt(e.currentTarget.dataset.index);
self = this;
this.setData({
curNav: id,
curIndex: index
})
},
