uni-app swiper组件指定跳转Bug

uni-app swiper组件指定跳转Bug

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC操作系统版本 Win10
HBuilderX类型 Alpha
HBuilderX版本 3.0.4
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

  • ios
  • 安卓

操作步骤：

  • 假如 swiper-item 有4个 ，如果当前是1 设置 swiper current-item-id = 4 它会从前面过三个swiper-item 到第4个

预期结果：

  • 它应该往后面退一格就好

实际结果：

  • 它会从前面过三个swiper-item 到第4个

bug描述：

<view class="zj_hdw">  
<swiper :current-item-id="item_id" :circular="true" class="swiper zj_wbk" previous-margin="200rpx" next-margin="200rpx" @change="changeScroll"  
circular="true">  
<swiper-item class="sp_hdl" :item-id="'slide'+index" @click="AlbumPageitem(item,index)" v-for="(item, index) in list"  
key="item.id" :class="{ zj_idx: index === tabCurrentIndex }">
    <view class="jn_lmk">
        <image :src="item.Picture" alt="" class="zj_lmk"></image>
        <text class="zj_lwz">{{item.Name}}</text>
    </view>
</swiper-item>
</swiper>
</view>


更多关于uni-app swiper组件指定跳转Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

补充下，这是在circular="true"的情况下才会出现

更多关于uni-app swiper组件指定跳转Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


严格来说这不算是一个bug，只是你想要这么个功能

是的 但是这个方式 不是那么人性化 哦

这是一个关于uni-app swiper组件current-item-id跳转行为的常见问题。根据你的描述，当从第1项跳转到第4项时，swiper会正向滑动经过中间项而不是反向滑动直接到达。

这是由于swiper组件默认的滑动动画行为决定的。在circular模式下，swiper会计算最短路径进行滑动。当从1跳转到4时，正向滑动经过2、3到4比反向滑动直接到4的路径更短（因为circular模式下首尾相连）。

解决方案：

  1. 可以监听change事件，手动控制current值的变化方向
  2. 或者使用animation-duration设置为0来禁用动画效果
methods: {
    changeScroll(e) {
        // 在这里处理滑动逻辑
    }
}
回到顶部