效果预览
代码片段
.wxml
.代码
<view class="nav-header">
<view wx:for="{{navs}}" wx:key='' class="nav-cell {{item.alias==activeNav?'active':''}}" bindtap="changeList" data-alias="{{item.alias}}">{{item.text}}</view>
</view>
.js
.代码
Page({
data: {
activeNav: 'hot',
navs: [{
text: '热门商品',
alias: 'hot'
}, {
text: '新品上市',
alias: 'new'
}]
},
changeList(e) {
console.log(e.target.dataset.alias);
const that = this;
const alias = e.target.dataset.alias;
if (alias !== this.data.activeNav) {
this.setData({
activeNav: e.target.dataset.alias,
loading: true
});
}
}
})
.wxss
代码.
.nav-header {
font-size: 28.12rpx;
display: -webkit-box;
text-align: center;
background: #fff;
padding: 0 16.41rpx;
height: 100.77rpx;
line-height: 100.77rpx;
}
.nav-cell {
-webkit-box-flex: 1;
}
.nav-cell.active {
color: #ff4b2d;
border-bottom: #ff4b2d 4.69rpx solid;
}
完成效果
- 运行效果如上,界面内容再通过wx:if进行展示即可。