mpvue 中控制swiper滑动,禁止滑动,只允许左滑动,不允许右滑

直接禁止滑动,使用:catchtouchmove参数就OK。

例子:

  <swiper-item v-for="(item,index) in examList" :key="index" catchtouchmove="false">content</swiper-item>

但是我的需求是进行人员测评,已经测评过的swiper-item允许左右滑动,没有测评过的swiper-item不允许滑动。所以我需要自定义监听左滑右滑,然后结合业务逻辑,直接进行控制就行。需要用到的属性:
touchStarttouchmove.stop。大概的思路代码如下:

<swiper class="swiper" :current="currentSwiper" :autoplay="autoplay" :interval="interval" previous-margin="12rpx" next-margin="22rpx" :circular="circular" :duration="duration" @change="swiperChange"><swiper-item v-for="(item,index) in examList" :key="index" @touchstart="touchStart" @touchmove.stop="touchMove">content</swiper-item>
</swiper>
data() {return {clientX1: 0, // 滑动开始位置}
},
methods: {touchStart (e) {this.clientX1 = e.clientX},touchMove (e) {if (this.clientX1 === 0) return falseconst clientX2 = e.clientXlet disX = this.clientX1 - clientX2// 判断左右滑动的阀值为15if (disX > 15) {// 左滑this.currentSwiper = this.currentSwiper + 1this.clientX1 = 0}if (disX < -15) {// 右滑this.currentSwiper = this.currentSwiper - 1this.clientX1 = 0}}
}

通过这个例子,我们需要了解catchtouchmovetouchmove.stop。虽不常用,但是有用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/415305.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工作166:错误的处理方式

1这种处理没有数据 2 这样处理勉强调用了接口 但是获取数据还是有问题

07异常处理

1、 【请尝试解释以下奇怪的现象&#xff01;】 int i1, j0, k; ki/j; 代码在运行时会引发异常 上边代码在运行时不会引发异常 浮点数除以0&#xff1a;Infinity 可以使用javap去反汇编两个示例程序的.class文件&#xff08;一个是AboutException.class&#xff0c;另一个是Thr…

java、Android 数组转集合

<array name"title"><item>51巅峰钜惠</item><item>十大星级品牌联盟&#xff0c;全场2折起</item><item>生命不是要超越别人&#xff0c;而是要超越自己。</item><item>己所不欲&#xff0c;勿施于人。——孔子<…

mac instantclient_12_2 安装配置

1、创建一个目录进行文件存放 mkdir oraclecd oracle2、instantclient_12_2文件拷贝到oracle目录下 3、拷贝重要文件到~/lib目录 mkdir ~/libln -s instantclient_12_2/libclntsh.dylib ~/lib/cp instantclient_12_2/{libclntsh.dylib.12.1,libnnz12.dylib,libociei.dylib} …

工作166:正确eachrt渲染方式

1第一步 2第二步 3第三步

Effective C++: 06继承与面向对象设计

32&#xff1a;确定你的public继承塑模出is-a关系 以C进行面向对象编程&#xff0c;最重要的一个规则是&#xff1a;public继承表示的是"is-a"&#xff08;是一种&#xff09;的关系。 如果令class D以public形式继承class B&#xff0c;你便是告诉编译器说&#xff…

Android轮播图 banner,图片视频混播banner

1、使用Android循环滚动控件——ViewFlipper实现方法&#xff1a;https://blog.csdn.net/meixi_android/article/details/84615857 2、使用第三方module实现方法&#xff1a; 需要引入的module下载链接&#xff1a;https://pan.baidu.com/s/1sdlQefBTfkLsNO__ouwz8w 添加mod…

oracle 实现 drop table if exists

使用如下代码进行替换&#xff1a; BEGINEXECUTE IMMEDIATE DROP TABLE this_table; EXCEPTIONWHEN OTHERS THENNULL; END;

Android recycleview使用详解,recycleview实现九宫格布局即横向排列,recycleview设置item占位数量大号item或小号item

1、添加recycleview依赖 compile(com.android.support:recyclerview-v7:25.1.1) {force true } 2、item.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xm…

cesium billboard 点击 不想显示infobox

cesium的一些实体默认点击&#xff0c;会弹出infobox。 如果不想弹出&#xff0c; 初始化的时候加上参数infoBox: false。 不想显示选中&#xff0c; 初始化的时候加上参数selectionIndicator: false。 示例&#xff1a; var viewer new Cesium.Viewer(cesiumContainer,…

工作168:代码中的删除逻辑处理

1首先找到对应方法里面的删除方法 2点击之后进行删除操作 在当前方法里面直接进行混入删除 删除结束

java如何对List集合中的元素进行排序(请收藏)

在java开发中有时候我们需要对List集合中的元素按照一定的规则进行排序&#xff0c;比如说有个Person的集合&#xff0c;我们要根据Person的age属性进行排序输出&#xff0c;这就需要用到Java中提供的对集合进行操作的工具类Collections&#xff0c;其中的sort方法&#xff0c;…

cesium面板动态显示并跟随移动

我的需求&#xff0c;首先显示一个billboard&#xff0c;点击billboard后&#xff0c;在旁边显示一个div面板&#xff0c;并且该面板随着地图拖拽也能进行相对运动。 概要实现步骤&#xff1a; 1、自定义div面板&#xff0c;面板需要设置id值 2、使用我自己定义的函数&#…

工作169:删除操作

this.$confirm(你正在进行删除操作, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(()>{deleteAction(path.join(this.url.delete, record.id))this.$message.success(res.msg);}).catch((err)>{this.$message.warning(err);})

Android 设置view透明度,广告标题透明背景

android:alpha"0.8" <ImageViewandroid:layout_width"match_parent"android:layout_height"match_parent"android:alpha"0.8"android:background"drawable/bantouheibg"/> colors<!-- 透明色 --> <color na…

bootstrapselect使用 Bootstrap's dropdowns require Popper.js

虽然我目前喜欢用vue&#xff0c;但是有一些项目会用bootstrap进行配合。 下面介绍一款bootstrap生态链的插件&#xff1a;bootstrapselect。 官网地址&#xff1a;https://www.bootstrapselect.cn/ 特别要注意一点&#xff0c;引入bootstrapselect前要先引入popper.js。 由…

Android recycleview实现混合itemview,以及recycleview添加头部尾部

需要引入的module链接&#xff1a;https://pan.baidu.com/s/1kcVye2vT4M0mdCtzYpUVKw 添加module方法步骤&#xff1a;https://blog.csdn.net/meixi_android/article/details/84655666 1、主要adapter /*** 作者&#xff1a;created by meixi* 邮箱&#xff1a;131647168401…

工作170:删除做个判断操作 成功删除 取消取消

this.$confirm(你正在进行删除操作, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then((res)>{deleteAction(path.join(this.url.delete, record.id))this.$message.success(res);}).catch((err)>{this.$message.warning(err);})

docker 报错 Container is not running

我在运行docker exec -it 56b90db5253e /bin/bash报错。 出现这个问题&#xff0c;是因为Container容器之前已经启动过了 需要执行docker start 56b90db5253e就可以解决了。