<swiper class="play-root-swiper" :current="frameIndex" :disable-touch="!finishedExam" @change="currentListener">
<swiper-item v-for="(info, index) in questionList" :key="index">
// ...
</swiper-item>
</swiper>
wohuo
- 发布：2022-03-04 18:54
- 更新：2023-03-30 14:44
- 阅读：1037
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.3.11
第三方开发者工具版本号： 1.05.2111300
基础库版本号： 2.22.0
项目创建方式： HBuilderX
示例代码：
操作步骤：
<swiper class="play-root-swiper" :current="frameIndex" :disable-touch="!finishedExam" @change="currentListener">
<swiper-item v-for="(info, index) in questionList" :key="index">
// ...
</swiper-item>
</swiper>
<swiper class="play-root-swiper" :current="frameIndex" :disable-touch="!finishedExam" @change="currentListener">
<swiper-item v-for="(info, index) in questionList" :key="index">
// ...
</swiper-item>
</swiper>预期结果：
在微信小程序中会在初始化的时候根据finishedExam的值决定是否禁止swiper滑动
在微信小程序中会在初始化的时候根据finishedExam的值决定是否禁止swiper滑动
实际结果：
在微信小程序中无论赋予disable-touch的值是什么都无法阻止swiper滑动，直接给 true 也不行
在微信小程序中无论赋予disable-touch的值是什么都无法阻止swiper滑动，直接给 true 也不行
bug描述：
swiper 基础组件的 disable-touch 属性编译到H5有效 编译到微信小程序无效
summerany - 跳过
我有个思路，希望对后面遇到此问题的人有所帮助
1.data声明disableTouch:false
2.在页面加入一个view 定义样式
<view class='shade' v-if='disableTouch'></view>
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
opacity: 0;
}
3.在swiper组件上定义 @change="swiperChange"
4.在methods中实现该方法
swiperChange (e) {
this.disableTouch = true
let current = e.detail.current;
// do someting
// END this.disableTouch = false
}
至此可以初步实现一个阻止swiper滑动
建议官方进行还是实现一个api进行控制
1***@qq.com
没有替代方法吗
2023-01-15 16:13