<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;
}
 
 

版权声明：本文为dianzan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dianzan/p/7999860.html