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