uni-app 利用自帶swiper實現點擊tab內容滑動，滑動內容tab切換（不使用插件）

結構

<view class="ui-car-select">
	<view class="ui-car-name-list">
		<view class="ui-car-name-item" v-for="(item,index) in carTypes" :class="{active:current==index}" :data-current="index" @tap="tabChange">{{item.cartype}}</view>
	</view>
	<view>
		<swiper class="ui-carinfos" @change="swiperChange" :current="current">
			<swiper-item class="ui-carinfo-item" v-for="(item,index) in carinfos">{{item.carinfo}}</swiper-item>
		</swiper>
	</view>
</view>

代碼

data() {
			return {
				visible: false,
				current:0,
				carTypes:[{
					cartype:"小麪包"
					},{
						cartype:"中麪包"
					},{
						cartype:"小貨車"
					},{
						cartype:"中貨車"
				}],
				carinfos:[{
					carinfo:"小麪包"
					},{
						carinfo:"中麪包"
					},{
						carinfo:"小貨車"
					},{
						carinfo:"中貨車"
				}]
			}
		},
methods:{
	tabChange:function(e){
		var index = e.target.dataset.current || e.currentTarget.dataset.current;
		this.current=index;
	},
	swiperChange:function(e) {			
		var index=e.target.current || e.detail.current;
		this.current = index;
	}
}

記得給tab添加.active類名的樣式。這裏就不寫了。

給tab的每一個加data-current，利用e.target.dataset.current賦值index。swiper利用自帶current屬性，利用e.target.current賦值index。

不知道會不會有兼容問題，或者其他的注意點。有知道的朋友歡迎留言。我也是第一次用，開始沒看到這個費了老大勁了。

可以參考hello uniapp template模板裏面的tabbar>tabbar.nvue。