- 发布：2025-11-03 17:12
- 更新：2025-11-03 17:12
- 阅读：56
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows11
HBuilderX类型： 正式
HBuilderX版本号： 4.76
手机系统： 全部
手机厂商： 华为
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<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>
<style lang="scss" scoped>
.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;
}
</style>
<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>
<style lang="scss" scoped>
.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;
}
</style>
操作步骤：
新建nvue页面，运行上述代码
新建nvue页面，运行上述代码
预期结果：
可以动态设置swiper circular属性，开启衔接滑动
可以动态设置swiper circular属性，开启衔接滑动
实际结果：
无法动态设置swiper circular属性，不生效，只有一开始设置的默认值生效。
无法动态设置swiper circular属性，不生效，只有一开始设置的默认值生效。
bug描述：
nvue页面使用swiper组件，circular属性一开始是false，后续动态设置为true后，不生效。无法衔接滑动。在帖子：https://ask.dcloud.net.cn/question/150354中官方回复已确认bug。2022年确认的bug，2025年还没修复？？？？
0 个回复