scroll-x.gif
// wxml
<view class="scroll-view-container">
<scroll-view class="scroll-view" scroll-x="true">
<block wx:for="{{tablist}}" wx:key="index">
<view class="scroll-item {{tab == index ? 'isActive':''}}" bindtap="clickTab" data-tab="{{index}}">{{item.title}}</view>
</block>
</scroll-view>
</view>
// wxss
::-webkit-scrollbar { // 隱藏滾動條
width: 0;
height: 0;
color: transparent;
}
.scroll-view-container{
line-height: 100rpx; // 行高 看設(shè)計稿更改
}
.scroll-view{
white-space: nowrap;
}
.scroll-item{
display:inline-block;
margin: 0 30rpx; // 間距 按需求更改
box-sizing: border-box;
height: 100rpx; // 固定高度 按需求更改
}
.isActive{
border-bottom: 4rpx solid #ffc34d; // 邊框 按需求更改
}
// js
data: {
tab: 0 // 默認(rèn)值
},
clickTab: function (e) {
var that = this;
var tab = e.target.dataset.tab;
if (that.data.tab === tab) { // 如果點擊的是同一個
return false;
} else {
that.setData({
tab: tab,
})
}
},
