微信 小程序组件 分页菜单带下划线焦点切换（最终版）*
<view class="edition-container">
<view class='edition-content'>
<!-- 1分类菜单-->
<view class='edition-menu flex'>
<block wx:key="edmenu" wx:for="{{edmenu}}" wx:for-index="index">
<view class='flexcca' data-index='{{index}}' bindtap='keyMenu'>
<text class="menu-title {{edmenuShow==index?'actitle':''}}">{{item.menunm}}</text>
<view class="menu-under {{edmenuShow==index?'edactive':''}}"></view>
</view>
</block>
</view>
</view>
</view>
//------------------------------
data: {
// （网页数据）
edmenu: [
{ menunm: '登录'},
{ menunm: '会员注册'},
{ menunm: '红娘注册'}
],
edmenuShow:1,
},
// 焦点控制函数
keyMenu: function (e) {
let that = this;
let index = e.currentTarget.dataset.index;
this.setData({
edmenuShow: index
})
},
//--------------------------------------------------------------------------
page{
">#fff;
}
.edition-container{
font-size: 30rpx;
color: #333;
}
/* 1分类菜单 */
.edition-menu{
height: 80rpx;
border-top: 1px solid #f7f7f7;
border-bottom: 1px solid #f7f7f7;
box-sizing: border-box;
}
.edition-menu>view{
width: 33.33%;
}
.edition-menu .menu-title{
margin-top: 16rpx;
}
.edition-menu .menu-under{
width: 140rpx;
height: 5rpx;
">transparent ;
border-radius: 6rpx;
margin-top: 10rpx;
}
.edition-menu .actitle{
color: #ff4273;
}
.edition-menu .edactive{
">#ff4273;
}
