uni-app nvue 页面中的swiper组件动态加载数据时会跳到第一个swiper-item怎么解决?

uni-app nvue 页面中的swiper组件动态加载数据时会跳到第一个swiper-item怎么解决?

示例代码

<template>  
    <view>  
        <swiper  :indicator-dots="true"  :interval="3000" :duration="1000" :current-item-id="id" style="margin-top: 100rpx;"  @change="portraitChange" @animationfinish="finish">  
            <swiper-item v-for="(item,index) in data" :item-id="item.id" >  
                <view class="swiper-item">{{item.name}}</view>  
            </swiper-item>  
        </swiper>  
        <view style="width: 200rpx; height: 200rpx; background-color: red;" @click="add">  

        </view>  
    </view>  
</template>  

<script>  

    export default {  
        data() {  
            return {  
                data:[  
                {name:'1',id:'1'},  
                {name:'2',id:'2'},  
                {name:'3',id:'3'},  
                {name:'4',id:'4'}  
                ],  
                id:0,  
            }  
        },  
        mounted() {  

        },  
        methods: {  
            add(){  
                var data1=[  
                {name:'5',id:'5'},  
                {name:'6',id:'6'},  
                {name:'7',id:'7'},  
                {name:'8',id:'8'}  
                ]  
                this.data=[...this.data,...data1]  
                console.log(this.data)  

            },  
            portraitChange(e){  
                // this.id = e.detail.currentItemId  
                console.log(e,'这是改变')  
            },  
            finish(e){  
                console.log(e,'这是动画结束')  
            }  
        }  
    }  
</script>

附件


更多关于uni-app nvue 页面中的swiper组件动态加载数据时会跳到第一个swiper-item怎么解决?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

你说的现象没有出现,详细说一下你的环境，提供一个完整的demo。

更多关于uni-app nvue 页面中的swiper组件动态加载数据时会跳到第一个swiper-item怎么解决?的实战教程也可以访问 https://www.itying.com/category-93-b0.html


您好, 是nvue页面在安卓手机上,然后 项目的nvue页面编译模式为 uniapp 已经提交domo在问题的附件里了

回复 愿得一人心z: 确认了，后续修复。

回复 2104_DLS: 好的

回复 愿得一人心z: hbx哪个版本的问题？

回复 雨夜敬清秋: 我现在的版本是3.1.9,我不知道其他版本有没有

回复 愿得一人心z: 好的，感谢

请问解决了吗

3.1.16.20210525-alpha已经修复了

回复 Mr_LTao: 然而3.1.16.20210525-alpha并没有修复。。。至少华为EMUI11上还是这样

回复 Mr_LTao: circular autoplay 的情况，有三张图，动态载入，第一次播放时是正常的，然一轮结束，又回到第一张图时，图片一闪过后就不显示了

HX3.1.17已修复

好的

我这边动态for 加载swiper-item时，有时会默认打开最后一个item，这是什么问题

回复 aQiu: 示例提供一下

这是一个常见的 swiper 数据更新问题。当动态添加数据时，swiper 会重新渲染并默认跳转到第一个 item。

解决方案是在数据更新后手动设置当前显示的 item。修改你的 add 方法：

add(){
    var data1=[
        {name:'5',id:'5'},
        {name:'6',id:'6'},
        {name:'7',id:'7'},
        {name:'8',id:'8'}
    ]
    
    // 保存当前显示的 id
    const currentId = this.id
    
    // 更新数据
    this.data = [...this.data, ...data1]
    
    // 使用 $nextTick 确保 DOM 更新完成后设置当前 item
    this.$nextTick(() => {
        this.id = currentId
    })
}
回到顶部