动态使⽤scroll-into-view设置滚动条的滚动到指定位置HTML部分：
封装的组件
<template>
<view class="tab-box">
<scroll-view scroll-x="true"  :scroll-into-view ="scroll_into_view"  show-scrollbar="true"
v-bind: >
<!-- :scroll-left="scrollViewLeft" -->
<view class="box">
<!-- <block  v-for="(value,index) in tab_list " > -->
<block v-for="(value,index) in tab_list"  >
<!-- :class="{'active': tabIndex == index}" -->
<!-- v-bind:class="{"active":current == index}" -->
<!-- @tap="tabtap(index)" -->
<view class="tab" :class="{'active': current == index}"  :id="value.id"js导航栏下拉菜单
@click="tarClick(index)">
{{value.name}}
</view>
</block>
<!-- <template  v-for="(value,index) in tab_list "  >
</template> -->
</view>
</scroll-view>
</view>
</template>
组件js
<script>
export default {
props:[
'tab_list',
'current',
"scroll_into_view"
// 'scrollViewLeft'
],
data() {
return{
screenWidth: SystemInfoSync().screenWidth, // 屏幕尺⼨screenHidth: SystemInfoSync().screenHeight, // 屏幕尺⼨width:'',
}
},
onLoad() {
this.width = this.screenWidth +'px';
},
methods: {
tarClick(index) {
this.$emit('tarClick',index);
},
}
}
</script>
组件样式c ss
<style lang="scss" scoped >
.tab-box {
height: 100rpx;
width: 100%;
width: 100%;
height: 100rpx;
display: flex;
flex-wrap: wrap;
flex-direction: column;
border-bottom: 1rpx solid #EEEEEE; .tab {
width: 25%;
display: inline-block;
white-space: nowrap;
color: #555;
height: 100rpx;
line-height: 100rpx;
text-align: center;
}
.active {
color: #CD0112;
}
}
}
</style>
引⽤组件
<tar
:tab_list="tab_list"
:current='currentTab'
:
scroll_into_view = "scroll_into_view" @tarClick="tarClick"
>
js部分
import tar from '@/components/swiper-tar/swiper-tar' components: {
tar
},
da ta部分：
scroll_into_view:'',
tab_list:[
{
name:'全部',
id:'id0'
},
{
name:'待付款',
id:'id1'
},
{
name:'待确认',
id:'id2'
},
{
name:'待发货',
id:'id3'
},
{
name:'待收货',
},
{
name:'已完成',
id:'id5'
},
{
name:'已取消',
id:'id6'
},
{
name:'⽆效',
id:'id7'
},
// '全部',
],
o nLo a d
注意要使⽤this.$nextTic k  来对 sc ro ll_into_view 值的改动this.currentTab = e.currentTab ;
this.$nextTick(()=> {
this.scroll_into_view = 'id' + String()
console.log('打印导航栏滚动条滚动到的⼦模块id');
console.log(this.scroll_into_view);
});
this.scroll_into_view = '' ;
metho
m etho d
注意要使⽤this.$nextTic k  来对 sc ro ll_into_view 值的改动

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。