添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
在给轮播图添加下拉刷新功能后,发现数据更新但轮播图不会回到第一张。问题的关键在于swiper组件的current属性和change事件。设置current为当前滑块的索引,并监听change事件以更新current值。在onPullDownRefresh方法中重置current为0,然后重新加载数据,即可实现下拉刷新后轮播图回到首页。 摘要由CSDN通过智能技术生成

原因分析及解决:

刚开始以为是 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>

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

做了一个h5的项目 是用uniapp写的 其有一个轮播的功能 发现有的时候自动轮播会失效 后来发现 当后台只有一项数据时 动态渲染则swiper-item也只会出现一条 那么这样 则不会自动轮播 用了官网的实例 <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> 2.点击首页列表进入详情页的时候把获取到的滚动条的位置保存到缓存里边 3.然后从详情页返回首页onshow的时候获取到刚刚缓存的滚动条位置并uni.pageScrollTo设置滚动条的位置 。 **备注:**再次从首页列表进入详情页的时候缓存里的滚动条位置会有缓存,所以需要第四步来处理一下。 4.onBackPress监听页面返回
antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key