<!-- 顶部tabs切换 -->
<view v-show="totalListArr.length>1" class="comp-tabs">
<!-- <view class="comp-tabs"> -->
<view v-for="(tabItem, tabIndex) in totalListArr" :key="tabIndex" class="comp-tabs-item" :class="{tabActive:tabItem.tabActive}" @click="tabsClick(tabItem.pageName, tabIndex)">
<view class="comp-tabs-item-inner">
{
{ tabItem.pageName.split('-')[1] }}
</view>
</view>
</view>
<!-- 商品轮播图 -->
<view class="goodsSwiper">
<swiper
//这里是切换的重点
v-if="ifSwiper "
class="goodsSwipe"
:indicator-dots="false"
:circular="true"
:previous-margin="'40rpx'"
:next-margin="'30rpx'"
:current="current"
@change="goodsSwipeChange"
@touchmove="swipertouchmove"
@touchstart="swipertouchstart"
>
<swiper-item v-for="(item,index) in goodsList" :key="index" :class="{SwiperItems:SwiperItems&&goodsList.length==1}" >
<view v-if="yewuType==1" class="Swiper-item-ronghe-box">
<view class="Swiper-item-title">
<view class="Swiper-item-title-charge">
{
{ item.charge }}
</view>
<view class="arrowicon" @click="centerpoppUp(item,index)">
{
{ title }}
<image :src="imgandicon.icon_arrow_right" />
</view>
</view>
<view class="Swiper-item-subTitle">
{
{ item.subtitle }}
</view>
<view class="Swiper-item-ronghe-taocan">
<view class="Swiper-item-ronghe-taocan-speed">
<view class="Swiper-item-ronghe-taocan-flow-num">
{
{ item.speed.split('M')[0] }}
<span>M</span>
</view>
</view>
<view class="Swiper-item-ronghe-taocan-flow">
<view class="Swiper-item-ronghe-taocan-flow-num">
{
{ item.flow }}
<span>GB</span>
</view>
</view>
<view class="Swiper-item-ronghe-taocan-voice">
<view class="Swiper-item-ronghe-taocan-flow-num">
{
{ item.voice }}
<span>分</span>
</view>
</view>
</view>
</view>
<view v-if="yewuType==2" class="Swiper-item-dixiao-box">
<view class="Swiper-item-title">
<view class="Swiper-item-title-charge">
{
{ item.charge }}
</view>
<view class="arrowicon" @click="centerpoppUp(item,index)">
{
{ title }}
<image :src="imgandicon.icon_arrow_right" />
</view>
</view>
<view class="Swiper-item-subTitle">
{
{ item.subtitle }}
</view>
</view>
<view v-if="yewuType==0" class="Swiper-item-dankuandai-box">
<view class="Swiper-item-title">
<view class="Swiper-item-title-charge">
{
{ item.charge }}
</view>
<view class="arrowicon" @click="centerpoppUp(item,index)">
{
{ title }}
<image :src="imgandicon.icon_arrow_right" />
</view>
</view>
<view class="Swiper-item-subTitle">
{
{ item.subtitle }}
</view>
</view>
</swiper-item>
</swiper>
</view>swiper滑动过程中切换导航栏要注意的以下几点
1，点击同一个导航栏也会报错，所以要用记录的思想记录上一次点击的位置，然后判断是不是点击同一个，同一个就不执行后面的所有的方法，反之执行
2，进去页面请求的时候要拦截防止请求未完成点击切换导航栏
3，每次切换导航栏要用v-if删除包括Swiper的所有的内容，包括最外层的大Swiper元素标签，切记不要用v-show
4，每次切换的时候由于在急速滑动，所以每次点击导航栏之后执行赋值时，要延迟几秒在执行赋值，因为滑动是异步的，所以延迟就是等滑动结束后再切换，这样就能解决切换后不正常展示的问题
5，第四点的补充。一定要在给轮播的数组赋完值之后，一定要将绑定的下标重新赋值，并且要延迟赋值，这样的话可以解决4解决不了的不能恢复问题
//点击导航栏
tabsClick(pageName,pageIndex){
// console.log("点击导航栏上一个下标和下一个",this.lastpageIndex,pageIndex)
//请求防止点击
if(this.goodsAxios){
console.log("是否拦截")
return
}
//防止点击单个导航栏一直点击
if(this.lastpageIndex == pageIndex){
return
}else{
this.goodsList = []
}
this.ifSwiper = false
this.lastpageIndex = pageIndex
let pid
if(pageName=="我是1"){
this.yewuType = 1
}
if(pageName=="我是2"){
this.yewuType = 2
}
if(pageName=="我是0"){
this.yewuType = 0
}
// console.log("点击导航栏的名字和下标",pageName,pageIndex)
// console.log("请求之前的数据",this.current)
500毫秒重新赋值这里是第4步
setTimeout(()=>{
this.postdaohangGoodsListBatch(pageName,pageIndex)
},500)
},4和5的代码
postdaohangGoodsListBatch(pid,pageName,pageIndex){
let arr =this.totalListArr.filter((item,index)=>{
return index == pageIndex
})
this.goodsList = arr[0].goods //赋值展示的数组
this.goodsListItem = arr[0].goods[0] //第一个赋值的商品对象
// //点击导航栏之后展示的页面
this.totalListArr.forEach((item) => {
item.tabActive = item.pageName == pageName
})
this.ifSwiper = true
//重新赋值下标，，这里是第5步
setTimeout(()=>{
if(this.goodsList.length<2){
this.current = 0
}
},300)
this.SwiperItems = true
},6，最后4和5解决不了的，再加上这个方法，强制执行，由于平移是tranfroms的css样式，那就加个变量和class名字，强行改变css的展示，设置tranfroms的所有x，y，z轴的值都为0，且加上！最高级（此方法是实在没办法的办法推荐）
7，如果你看完以上所有的思路，恭喜你，下面这个方法更简单，直接更改swiper的滑动时间即可
设置滑动时间属性duration为100就可以解决，加上上面的方法4，即可
扫描二维码关注公众号，回复：
14578242 查看本文章
<swiper
v-if="ifSwiper"
class="goodsSwipe"
:indicator-dots="false"
:circular="true"
:duration="goodsSwipeduration"
:previous-margin="'40rpx'"
:next-margin="'30rpx'"
:current="current"
@change="goodsSwipeChange"
>
<swiper-item v-for="(item,index) in goodsList" :key="index" :class="{SwiperItems:SwiperItems&&goodsList.length==1}" @transition="transition" @animationfinish="animationfinish">
<swiper-item>
<swiper>data(){
return {
goodsSwipeduration:100,
goodlist:[],
//剩下的绑定数据就不写了就这样吧
}
}