uni-app nvue页面使用swiper组件动态设置circular属性不生效

uni-app nvue页面使用swiper组件动态设置circular属性不生效

测试过的手机：

  • oppo
  • huawei
  • iphone 15

示例代码：

<template>
<view class="video-wrapper">
<view @click="changeCircular" style="padding-top: 50px;">
    <text>点击动态改变circular为true</text>
</view>
<swiper class="video-swiper" :circular="isCircular" :vertical="true"
duration="300">
<swiper-item>
<view>
    <text>我是第一页</text>
</view>
</swiper-item>
<swiper-item>
<view>
    <text>我是第二页</text>
</view>
</swiper-item>
<swiper-item>
<view>
    <text>我是第三页</text>
</view>
</swiper-item>
</swiper>
</view>
</template>  

<script lang="ts" setup>
import {
watch,
ref,
onMounted,
onUnmounted,
computed,
nextTick
} from "vue";
const isCircular = ref(false)
function changeCircular() {
isCircular.value = true
console.log("circular改变后的值====",isCircular.value )
}
</script>  

.video-wrapper {
display: flex;
flex: 1;
position: relative;
box-sizing: border-box;
overflow: hidden;
background-color: #ffffff;
}

.video-swiper {
display: flex;
flex: 1;
background-color: #ffffff;
}

.swiper-item {
display: flex;
flex: 1;
position: relative;
background-color: #ffffff;
}

操作步骤：

  • 新建nvue页面，运行上述代码

预期结果：

  • 可以动态设置swiper circular属性，开启衔接滑动

实际结果：

  • 无法动态设置swiper circular属性，不生效，只有一开始设置的默认值生效。

bug描述：

nvue页面使用swiper组件，circular属性一开始是false，后续动态设置为true后，不生效。无法衔接滑动。在帖子：https://ask.dcloud.net.cn/question/150354中官方回复已确认bug。2022年确认的bug，2025年还没修复？？？？


更多关于uni-app nvue页面使用swiper组件动态设置circular属性不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue页面使用swiper组件动态设置circular属性不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的nvue平台的历史遗留问题。在nvue页面中，swiper组件的circular属性确实存在动态设置不生效的限制。

根据官方文档和问题反馈，circular属性在nvue中需要在初始化时就确定，后续动态修改可能不会触发视图更新。这是由于nvue的渲染机制与vue页面有所不同。

目前的解决方案是：

  1. 如果确实需要动态切换circular，建议重新初始化整个swiper组件，通过v-if控制组件的销毁和重建
  2. 或者考虑使用vue页面而非nvue页面来实现此功能
  3. 在初始化时就设定好circular的最终值

可以尝试以下修改：

const showSwiper = ref(true)
const isCircular = ref(false)

function changeCircular() {
    showSwiper.value = false
    nextTick(() => {
        isCircular.value = true
        showSwiper.value = true
    })
}

在模板中添加v-if：

<swiper v-if="showSwiper" class="video-swiper" :circular="isCircular" :vertical="true">
回到顶部