欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序组件 分页菜单带下划线焦点切换

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:738

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:502

HTML5影视传媒文化公司类网

2020-05-12   浏览:497

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

发布时间:2020-11-07  

 

 

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