项目场景:
今天练习的时候,发现给轮播图加下拉刷新的方法后,数据会重新打印,但是轮播图没有回到第一张图片
原因分析及解决:
刚开始以为是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版权协议,转载请附上原文出处链接和本声明。