![](https://i-blog.csdnimg.cn/blog_migrate/495af48b8ec67792844ff5ace3310de1.gif)
关键词:
-
scroll-view
-
scroll-x="{{true}}"
-
scroll-left
-
white-space: nowrap;
-
display: inline-block;
wxml:
<scroll-view scroll-x class='yqxz' style="width: 100%" scroll-left="{{left}}" scroll-with-animation>
<view class="tab {{oIndex==0?'focus':' '}}" data-index='0' bindtap="switchTab">西院区</view>
<view class="tab {{oIndex==1?'focus':' '}}" data-index='1' bindtap="switchTab">东院区</view>
<view class="tab {{oIndex==2?'focus':' '}}" data-index='2' bindtap="switchTab">北院区</view>
<view class="tab {{oIndex==3?'focus':' '}}" data-index='3' bindtap="switchTab">南院区</view>
</scroll-view>
wxss:
.yqxz {
overflow-x: auto;
height: 90rpx;
white-space: nowrap;
font-family: Monaco; font-size: 9pt;">#fff;
}
.tab {
display: inline-block;
height: 86rpx;
line-height: 86rpx;
border-bottom: 4rpx solid transparent;
padding: 0 64rpx;
}
.tab.focus {
border-bottom-color: #16cc80;
}
wxjs:
data: {
oIndex: 0,
left: 0,
}
switchTab: function (e) {
var oIndex= e.currentTarget.dataset.index;
var oLeft = e.currentTarget.offsetLeft;
if(oLeft == 327) {
this.setData({
left: 327,
})
} else if(oLeft == 0) {
this.setData({
left: 0,
})
}
this.setData({
oIndex: oIndex
})
},
上面只是关键的部分,其实现主要是通过scroll-left事件改变根据判断改变left值。