uniapp中下拉刷新后轮播图swiper没有重置到第一页

项目场景:

今天练习的时候,发现给轮播图加下拉刷新的方法后,数据会重新打印,但是轮播图没有回到第一张图片


原因分析及解决:

刚开始以为是onPullDownRefresh方法的问题,查了很多资料,最后发现是swiper中要设置一下东西,看代码:
1、要设置current属性,意思是当前所在滑块的 index
2、要给swiper添加change事件 @change="changeswiper"
代码如下:

<swiper 
  	  @change="changeswiper" 
      :indicator-dots="true"
      indicator-color="rgba(255,255,255,.5)"
      indicator-active-color="#ff372b" 
      :autoplay="true" 
      :interval="3000" 
      :duration="500"
	  :current="currentswiper"
	  >
		<swiper-item v-for="(item,index) in swiper" :key="index">
			<view class="swiper-item">
				<image :src="item.imageUrl" mode="widthFix"></image>
			</view>
		</swiper-item>
</swiper>

<script>
export default{
data(){
return{
currentswiper:0
}
}
onPullDownRefresh() {
	// this.swiper = [];
	this.currentswiper = 0;//一定要在这里重置这个数据是0
	this.loadData()//轮播图接口重新请求,我这里写的是我代码中的请求方法,你们可以换成自己的
	//关闭下拉刷新
	setTimeout(() => {
	uni.stopPullDownRefresh();
	}, 1000);
},
methods:{
changeswiper(e) { // 一定得加上这个方法!!!否则无效
		this.currentswiper = e.detail.current
	},
}
}
</script>

以上,就可以实现下拉刷新后,轮播图返回第一页了~


版权声明:本文为weixin_45003732原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。