返回顶部
首页 > 资讯 > 移动开发 >【uniapp】设置swiper组件禁止手动滑动失效的问题
  • 754
分享到

【uniapp】设置swiper组件禁止手动滑动失效的问题

uni-app微信小程序小程序 2023-09-15 06:09:35 754人浏览 八月长安
摘要

写uniapp项目有个跨多端平台的有点,但是要埋的坑比较多,这不有一个平台跨出现问题了,编译运行在微信小程序开发工具上会出现了,swiper组件设置禁止手动滑动失效的问题,接下来讲讲怎么解决 文

写uniapp项目有个跨多端平台的有点,但是要埋的坑比较多,这不有一个平台跨出现问题了,编译运行在微信小程序开发工具上会出现了,swiper组件设置禁止手动滑动失效的问题,接下来讲讲怎么解决

文章目录

1. 先看文档

uniapp官方文档介绍的 swiper 是这样写得属性说明,但有时会失效,看到这里挖个坑,来填了

属性名类型默认值说明
disable-touchBooleanfalse是否禁止用户 touch 操作
touchableBooleantrue是否监听用户的触摸事件,只在初始化时有效,不能动态变更

2. 尝试修改

在某自定义组件内有加了swiper,又想要停止用户触摸滑动操作,加上catchtouchmove属性后,代码如下

<template><swiper class="zs-tablet-box" active-class="swipter-active" :current="activeIndex" disable-touch="true" touchable="false" ><swiper-item class="box-item" catchtouchmove="onstoptouchmove"><view class="fORM"><view class="form-header"><text>设置text>view><view class="form-content"><scroll-view :scroll-y="true" :style="{height:(size-60)+'px'}"><view><slot>slot>view>scroll-view>view>view>swiper-item>swiper>template><script>export default {data(){return {size:300,activeIndex:0,}},//...methods:{onstoptouchmove(){return false;},}//...}script>

但是,这放在微信小程序上编译后会报出上面提到的错误,...does not have a method "onstoptouchmove" to handle event "touchmove",究竟是什么意思呢,翻译过来是说触摸移动方法有问题

2. 解决方法

解决方法是这样的,在uniapp项目上只要在前面加上@,还有,要符合Vue规范写法,应该替换成touchmove.stop这样,在微信小程序上就不会报错了,果然有效,代码如下

<swiper-item class="box-item"><view class="form"><view class="form-header"><text>设置text>view><view class="form-content"><scroll-view :scroll-y="true" :style="{height:(size-60)+'px'}"><view><slot>slot>view>scroll-view>view>view>swiper-item>

来源地址:https://blog.csdn.net/zs1028/article/details/127935802

--结束END--

本文标题: 【uniapp】设置swiper组件禁止手动滑动失效的问题

本文链接: https://lsjlt.com/news/408196.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作