微信 小程序组件 分页菜单带下划线焦点切换（最终版）*

<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{

33.33%;

}

.edition-menu .menu-title{

margin-top: 16rpx;

}

.edition-menu .menu-under{

140rpx;

height: 5rpx;

">transparent ;

border-radius: 6rpx;

margin-top: 10rpx;

}

.edition-menu .actitle{

color: #ff4273;

}

.edition-menu .edactive{

">#ff4273;

}