HTML部分：
封装的组件
<template>
<view class="tab-box">
<scroll-view scroll-x="true" :scroll-into-view ="scroll_into_view" show-scrollbar="true"
v-bind:style="{'width': width}" >
<!-- :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"
@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: uni.getSystemInfoSync().screenWidth, // 屏幕尺寸
screenHidth: uni.getSystemInfoSync().screenHeight, // 屏幕尺寸
width:'',
}
},
onLoad() {
this.width = this.screenWidth +'px';
},
methods: {
tarClick(index) {
this.$emit('tarClick',index);
},
}
}
</script>
组件样式css
<style lang="scss" scoped >
.tab-box {
height: 100rpx;
width: 100%;
.box {
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"
>
</tar>
js部分
import tar from '@/components/swiper-tar/swiper-tar'
components: {
tar
},
data部分：
scroll_into_view:'',
tab_list:[
{
name:'全部',
id:'id0'
},
{
name:'待付款',
id:'id1'
},
{
name:'待确认',
id:'id2'
},
{
name:'待发货',
id:'id3'
},
{
name:'待收货',
id:'id4'
},
{
name:'已完成',
id:'id5'
},
{
name:'已取消',
id:'id6'
},
{
name:'无效',
id:'id7'
},
// '全部',
],
onLoad
注意要使用this.$nextTick 来对 scroll_into_view 值的改动
this.currentTab = e.currentTab ;
this.$nextTick(()=> {
this.scroll_into_view = 'id' + this.currentTab.toString()
console.log('打印导航栏滚动条滚动到的子模块id');
console.log(this.scroll_into_view);
});
this.scroll_into_view = '' ;
method
注意要使用this.$nextTick 来对 scroll_into_view 值的改动
// 轮播模块切换
swiper_change:function(e) {
this.currentTab = e.detail.current;
console.log("e.detail.current");
console.log(e.detail.current);
this.$nextTick(()=> {
this.scroll_into_view = 'id' + this.currentTab.toString()
console.log('打印导航栏滚动条滚动到的子模块id');
console.log(this.scroll_into_view);
});
this.scroll_into_view = '' ;
},
tarClick:function(index) {
console.log('触发点击切换事件')
console.log(index)
this.currentTab = index ;
this.$nextTick(()=> {
this.scroll_into_view = 'id' + this.currentTab.toString()
console.log('打印导航栏滚动条滚动到的子模块id');
console.log(this.scroll_into_view);
});
this.scroll_into_view = '' ;
},
效果
|
