实现逻辑:结合uni-app 中的 scroll-view 组件 和 scroll-view 提供的两个参数(scroll-into-view、scroll-with-animation)
// 左侧 定义了点击事件 @click="menuTab(index),控制了点击样式 :class="{cateActive:index == current}"
<scroll-view class="cartNameLeft" scroll-y="true">
<view class="cartNameItem" :class="{cateActive:index == current}" v-for="(item,index) in cate" :key='index' @click="menuTab(index)">
{
{
item.catename}}
<view class="cateLine"></view>
</view>
</scroll-view>
scroll-into-view 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
// 右侧 滚动元素设置id id不能数字开头,scroll-view 滚动标签设置为'cate'+current ,设置为'cate'+current是为了和左侧点击事件关联,因为左侧根据 current 改变样式
<scroll-view scroll-y="true" :scroll-into-view = "'cate'+current" scroll-with-animation="true">
<view class="cateTtem" v-for="(item,index) in cate" :key="index" :id="'cate'+index">
- 导航 -
</view>
</scroll-view>
export default {
data() {
return {
cate:[],
current:0
}
},
onLoad() {
this.getData()
},
methods: {
getData() {
uni.request({
url: '/api/index/cate',
success: (res) => {
this.cate = res.data.data;
console.log(res.data.data);
}
});
},
menuTab(index) {
this.current = index
}
}
}