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:'待確認(rèn)',
id:'id2'
},
{
name:'待發(fā)貨',
id:'id3'
},
{
name:'待收貨',
id:'id4'
},
{
name:'已完成',
id:'id5'
},
{
name:'已取消',
id:'id6'
},
{
name:'無效',
id:'id7'
},
// '全部',
],
onLoad
注意要使用this.$nextTick ?來對(duì)?scroll_into_view 值的改動(dòng)
this.currentTab = e.currentTab ;
this.$nextTick(()=> {
this.scroll_into_view = 'id' + this.currentTab.toString()
console.log('打印導(dǎo)航欄滾動(dòng)條滾動(dòng)到的子模塊id');
console.log(this.scroll_into_view);
});
this.scroll_into_view = '' ;
method
注意要使用this.$nextTick ?來對(duì)?scroll_into_view 值的改動(dòng)
// 輪播模塊切換
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('打印導(dǎo)航欄滾動(dòng)條滾動(dòng)到的子模塊id');
console.log(this.scroll_into_view);
});
this.scroll_into_view = '' ;
},
tarClick:function(index) {
console.log('觸發(fā)點(diǎn)擊切換事件')
console.log(index)
this.currentTab = index ;
this.$nextTick(()=> {
this.scroll_into_view = 'id' + this.currentTab.toString()
console.log('打印導(dǎo)航欄滾動(dòng)條滾動(dòng)到的子模塊id');
console.log(this.scroll_into_view);
});
this.scroll_into_view = '' ;
},
效果
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????|
