当前位置 博文首页 > 花无缺的博客：微信小程序简单滑动导航栏
效果图如下：
根据点击滑动的下标实现颜色的变化
<scroll-view scroll-x="true" class="nav_select">
<text class="select_item { {currentTab==index?'red':''} }" wx:for="{ {articleType} }"
wx:key bindtap='selected_tap' data-index='{ {index} }' data-current='{ {index} }'>
{ {item.dictLabel} }
</text>
</scroll-view>
data: {
currentTab: 0
},
selected_tap: function (e) {
console.log(e)
var that = this;
that.setData({
currentTab: e.target.dataset.current
})
}
.nav_select {
white-space: nowrap;
background: white;
height: 100rpx;
}
.select_item {
display: inline-block;
margin-right: 20rpx;
margin-left: 20rpx;
padding-right: 20rpx;
line-height: 35rpx;
padding-left: 10px;
}
.red {
color: red;
font-size: 16px;
border-bottom-color: red;
border-bottom-style: solid;
padding-bottom: 12px;
padding-left: 10px;
}
具体看参考我的小程序：
