小程序顶部动态导航栏
导航栏栏目只需要修改js里面table即可
html
<view class='modle_1_nav'>
<view style='width:{{nav_width}}%' bindtap='ActiveClick' wx:for="{{table}}" data-index='{{index}}' class="modle_1_nav_modle {{activeIndex==index?'modle_1_nav_active':''}}">{{item}}
<view wx:if="{{activeIndex==index}}" class="modle_1_nav_modle_border"></view>
</view>
</view>
<view class='nav'></view>
js
Page({
data: {
table: ["已付款", "代付款", "已收货", "待收货", "已审核"],
activeIndex: 0,
nav_width:""
},
onLoad: function (options) {
this.setData({
nav_width: 100 / this.data.table.length
})
},
ActiveClick: function (e) {
this.setData({
activeIndex: e.currentTarget.dataset.index
})
console.log(this.data.activeIndex)
},
})
css
page{
background: #f9f9f9;
}
.modle_1_nav{
position: fixed;
top: 0rpx;
width: 100%;
height: 70rpx;
background: #fff;
color: #989898;
font-size: 28rpx;
border-bottom: 1rpx solid #f9f9f9;
line-height: 70rpx;
}
.modle_1_nav_modle{
text-align: center;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
display: inline-block;
}
.modle_1_nav_modle_border{
width: 30rpx;
margin: 0 auto;
height: 5rpx;
background: #333;
}
.modle_1_nav_active{
color: #333;
line-height: 62rpx;
}
.nav{
height: 70rpx;
width: 100%;
}