在给轮播图添加下拉刷新功能后,发现数据更新但轮播图不会回到第一张。问题的关键在于swiper组件的current属性和change事件。设置current为当前滑块的索引,并监听change事件以更新current值。在onPullDownRefresh方法中重置current为0,然后重新加载数据,即可实现下拉刷新后轮播图回到首页。
刚开始以为是
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.currentswiper = 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