vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）

<!-- 顶部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 = falsethis.lastpageIndex = pageIndexlet pidif(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，即可

<swiperv-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:[],//剩下的绑定数据就不写了就这样吧}
}

vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）相关推荐

Mint-UI 移动首页开发 - header导航、banner轮播图
Mint-UI 移动首页style排版问题:header导航.banner轮播图.footer底部版权··· ··· 资源预览: 中文 2.x官方文档(含演示地址): 文档首页中文 2.x官方文档( ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...
vue商城项目开发：底部导航样式、顶部导航矩阵和轮播图
底部导航样式修改第一步: 第二步: 顶部导航矩阵 v-for取代多次复制字体图标动态传入动态绑定样式添加8个 {{}}和{}的区别 {{}}: 不带任何符号: {}: 首页轮播图准备图片数组 ...
移动端h5 层叠轮播图，uniapp微信小程序层叠轮播图，3d轮播图
如果你的项目使用的是jquery的话推荐使用swiper 进行做 https://www.swiper.com.cn/usage/index.html 如果用的是vue3开发的纯h5项目的话,推荐 ...
记录下如何用vue实现PC端网易云轮播图效果
记录下自己写仿网易云音乐手写的轮播图,效果如图简单来说,这个轮播图原理是用css定位把所有图片叠再一起,显示前3张图片,第2张图片层里设置层级为最高,1,3俩张图片层级比2层级低,比其他图片高就行. ...
数据轮播图翻页封装（左右点击）
效果图: <template><div class="box" style="height:200px;"><!-- 左 --&g ...
项目轮播图功能实现和导航栏的实现
项目轮播图功能实现和导航栏的实现轮播图功能安装依赖模块上传文件相关配置注册home子应用创建轮播图的model模型创建Banner的序列化器创建Banner的视图类配置Banner的路 ...
uniapp中设置轮播图
实现:在uniapp中设置轮播图先看效果图找不到现成的接口,先在网上找几张图片,为了防链接失效,直接把图片传到文章里,文章在图就在 https://img-blog.csdnimg.cn/img_ ...

vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）

vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）相关推荐

最新文章

热门文章