一、話不多說，上代碼
.wxml文件寫法
<!-- 滾動條 -->
<scroll-view scroll-x="true" scroll-with-animation="true" enable-flex="true" class="scroll-view">
<view wx:for="{{dateAndfeeList}}" wx:key="{{item.date}}" data-currentItem="{{item}}" data-index="{{index}}" class="{{currentTab==index?'scroll_item':''}}" bindtap="swichNav">
<view class="fee_item">
<text>{{item.date}}</text>
<text>合計:￥{{item.zfy}}</text>
</view>
</view>
</scroll-view>css樣式
.scroll-view {
width: 100%;
display: inline-flex;
height: 80px;
}
.scroll_item {
color: rgb(43, 183, 226);
}
.fee_item {
display: flex;
flex-direction: column;
min-width: 130px;
margin-top: 8px;
margin-bottom: 8px;
text-align: center;
border-right: 1.5px solid #adaaaa;
}js寫法
swichNav(e) {
var index = e.currentTarget.dataset.index,
this.setData({
currentTab: index,
})
}二、解析
?scroll-x="true"：表明是橫向滾動文章來源：http://www.zghlxwxcb.cn/news/detail-527168.html
class="{{currentTab==index?'scroll_item':''}}"：當(dāng)點擊時才會變色，其中currentTab的初始值是0，通過點擊事件更改值文章來源地址http://www.zghlxwxcb.cn/news/detail-527168.html
到了這里，關(guān)于微信小程序--開發(fā)橫向滾動條scroll-view的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
