导航列表栏滑动 scroll-view，滑动时item也随着滑动
2020-02-18 本文已影响0人
laogui_
话不多说，直接上码：
核心：:scroll-left="scrollLeft"
html：
<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
<view class="cu-items flex_col _f30 " :class="index==TabCur?'sel':'unsel'" v-for="(item,index) in Tablist" :key="index" @tap="tabSelect"
:data-index="index" :data-id="item.id">
<view class="" style="line-height: 70upx;">{{item}}</view>
<view class="_flex-center">
<view class="border" :class="index==TabCur?'bordersel':'borderunsel'"></view>
</view>
</view>
</scroll-view>
js ：
data初始化数据部分：
data() {
return {
TabCur: 0, //选择的index
scrollLeft: 0,//选择滑动的移动样式控制
}
},
方法函数部分：
// 头部导航选择滑动
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.index;
this.scrollLeft = (e.currentTarget.dataset.index - 1) * 60
},
