微信 小程序组件 分页菜单带下划线焦点切换

 

 

 

 

<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

})

},

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