微信小程序-侧滑删除

简介      

        movable-view和movable-area是可移动的视图容器,在页面中可以拖拽滑动。

        本篇文章将会通过该容器实现一个常用的拖拽按钮功能。

使用效果

代码实现

side-view.wtml

布局见下面代码,left view为内容区域,right view为操作按钮,在使用时候只需要替换left和right 对应slot即可。

movable-area 宽度 为left宽度,movable-view宽度为left + right宽度

监听事件为鼠标点击和鼠标弹起事件。

<!--slide-view/slide-view.wxml-->
<movable-area class="container" style="width: {{width}}rpx;height: {{height}}rpx;"><movable-view direction="horizontal" class="movable-view" style="width: {{width + slideWidth}}rpx; height: {{height}}rpx;" inertia bind:touchend="onTouchEnd" damping="100"out-of-boundsx = "{{x}}" bind:touchstart="onTouchStart" ><view class="left" ><slot name= "left"></slot></view><view class= "right"><slot name="right"></slot></view></movable-view>
</movable-area>
side-view.js

       组件的state 为 x, x表示movable-view 水平位置,在鼠标弹起时候,若移动距离大于threshold,则设置x为-threshold,否则为0。

注意: 事件event 对应位置,大小单位为px,而我们设置的参数都是rpx,若对其计算时候,注意两者之间转换。


Component({/*** 组件的属性列表*/options: {multipleSlots: true},properties: {//  组件显示区域的宽度,rpxwidth: {type: Number,value: 750},//  组件显示区域的高度,rpxheight: {type: Number,value: 0},//  组件滑动显示区域的宽度,rpxslideWidth: {type: Number,value: 0}},/*** 组件的初始数据*/data: {x: 0},/*** 组件的方法列表*/ready: function ready() {this.init();},ready: function () {this.initFunc()},methods: {initFunc: function(){// 获取右侧滑动显示区域的宽度var that = this;var query = wx.createSelectorQuery().in(this);query.select('.right').boundingClientRect(function (right) {    that._slideWidth = right.width * 2; // rpxthat._threshold = right.width / 2; // pxthat.setData({width:750,height:100,slideWidth: that._slideWidth}) //触发渲染}).exec();},onTouchStart: function onTouchStart(e) {this._startX = e.changedTouches[0].pageX;console.log('startX:'+this._startX)},//  当滑动范围超过阈值自动完成剩余滑动onTouchEnd: function onTouchEnd(e) {this._endX = e.changedTouches[0].pageX; // pxconsole.log('endX:'+this._endX)var _endX = this._endX,_startX = this._startX, _threshold = this._threshold;if (_startX - _endX >= _threshold) {this.setData({x: -this._slideWidth});} else {this.setData({x: 0});} },}
});

index.wtml

<!--index.wxml--><slide-view heigth = "100" width="750"><view class="left" slot = "left">这是一段文字</view><view class="right" slot = "right" width = "300"><view class="read">已读</view><view class="delete">删除</view></view>
</slide-view>

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

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

相关文章

ORACLE无法OPEN,处理三板斧

mount下先查询数据文件头的检查点是否一致 查询 v$datafile_header &#xff0c;CHECKPOINT_CHANGE#均一致&#xff0c;FUZZY为YES SQL> select file#, fuzzy, to_char(CHECKPOINT_CHANGE#) from v$datafile_header;1)对于open resetlogs时数据文件中有脏数据的情况&#x…

初探深度学习-手写字体识别

前言 手写数字的神经网络识别通常指的是通过训练有素的神经网络模型来识别和分类手写数字图像的任务。这种类型的任务是机器学习和计算机视觉领域的一个经典问题&#xff0c;经常作为入门级的图像识别问题来展示和测试各种机器学习算法的能力。在实际应用中&#xff0c;手写数…

Job for ssh.service failed because the control process exited with error code.

错误如下&#xff1a; Start operation timed out. Terminating.Failed to start openbsd secure shell server 或者是 Job for ssh.service failed because the control process exited with error code. 有统一的解决办法&#xff01; 先卸载SSH服务&#xff0c;然后删除缓存…

分享一些开源的游戏仓库

1.CnC_Remastered_Collection 红色警戒95版本 https://github.com/electronicarts/CnC_Remastered_Collection gitee仓库分流&#xff1a;https://gitee.com/loswdarmy/CnC_Remastered_Collection 2.Far-Cry-1-Source-Full 孤岛惊魂1 https://github.com/StrongPC123/Far-Cry-…

mac电脑总卡蓝屏是怎么回事,苹果电脑老卡蓝屏怎么办

电脑老卡蓝屏是比较常见的电脑故障之一&#xff0c;导致这一问题的出现很可能是电脑本身的硬件&#xff0c;或电脑上的驱动安装错误&#xff0c;没法运行&#xff0c;当然也不排除其他的一些因素。虽说电脑蓝屏是电脑几乎都会出现的小毛病&#xff0c;不足以致命&#xff0c;但…

安卓native编程

目录 如何在native中访问assets内容 如何在native中访问assets内容 Android: 在native中访问assets全解析

读书·基于RISC-V和FPGA的嵌入式系统设计

引言&#xff1a;第八届集成电路创新创业大赛龙芯杯是有关嵌入式SoC设计的 由于我本身是做纯硬件设计&#xff0c;此前没怎么接触软硬协同 玩过Zynq&#xff0c;但是到SDK部分就去吃灰了 现在后悔了&#xff0c;所以&#xff0c;做人一定要有始有终啊~TAT -------------------…

python 蓝桥杯之常用的库

文章目录 heapqCounter导入模块创建一个 Counter 对象获取元素的出现次数访问特定元素的计数更新计数获取计数值最高的元素其他常用方法 defaultdict导入模块创建一个 defaultdict(set)向字典中添加元素访问字典中的元素访问不存在的键注意事项 heapq heapq 是 Python 中的一个…

基于决策树实现葡萄酒分类

基于决策树实现葡萄酒分类 将葡萄酒数据集拆分成训练集和测试集&#xff0c;搭建tree_1和tree_2两个决策树模型&#xff0c;tree_1使用信息增益作为特征选择指标&#xff0c;B树使用基尼指数作为特征选择指标&#xff0c;各自对训练集进行训练&#xff0c;然后分别对训练集和测…

图论练习6

[NOIP2013]车站分级 Here 解题思路 由于起始点之间所选的站号&#xff0c;相互之间一定满足那么对于起始点间未选择的站号&#xff0c;一定满足选择的站号考虑用边来维护信息&#xff0c;表示的级别大于按题意&#xff0c;则车站会被分为几个联通块&#xff0c;且保证块内无环…

So you think you understand IP fragmentation?

文章目录 前言一、Why care?二、Prevention三、Well-understood?四、Introducing fragquiz五、A novel (?) algorithm六、Reader challenge七、traceroute八、ICMP参考资料 前言 本文来自&#xff1a;https://lwn.net/Articles/960913/ February 7, 2024This article was …

【Python】成功解决ModuleNotFoundError: No module named ‘seaborn’

【Python】成功解决ModuleNotFoundError: No module named ‘seaborn’ &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; …

高分辨率全球海洋温度和盐度再分析数据Global Ocean Physics Reanalysis(0.083°),并利用matlab读取绘图

1.引言 在研究全球海平面变化的问题中&#xff0c;卫星测高获得总的海平面变化&#xff0c;而海平面变化包含质量变化和比容变化。因此测高数据和海洋物理分析数据对于海平面研究至关重要。 测高数据下载网址&#xff1a; Global Ocean Gridded L 4 Sea Surface Heights And …

动态规划课堂4-----子数组系列

目录 引入&#xff1a; 例题1&#xff1a;最大子数组和 例题2&#xff1a;环形子数组的最大和 例题3&#xff1a;乘积最大子数组 例题4&#xff1a;乘积为正数的最长子数组 总结&#xff1a; 结语&#xff1a; 引入&#xff1a; 在动态规划&#xff08;DP&#xff09;子…

农场管理小程序|基于微信小程序的农场管理系统设计与实现(源码+数据库+文档)

农场管理小程序目录 目录 基于微信小程序的农场管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、用户信息管理 2、农场信息管理 3、公告信息管理 4、论坛信息管理 四、数据库设计 五、核心代码 七、最新计算机毕设选题推荐 八、源码获取&#x…

mysql和redis的区别

一.额外知识 1.为什么内存读取比硬盘读取快 在了解mysql和redis的区别之前,先来讨论一下额外的知识:为什么内存读取比硬盘读取快? 先看一个结论:内存读取至少比硬盘读取快10万倍 首先机械硬盘基本上的速度都在100MB-200MB 之间&#xff0c;SSD硬盘快一点,但是也是在500MB左右…

【工具使用-VScode】VScode如何设置空格和tab键显示

一&#xff0c;简介 在提交代码的时候&#xff0c;行末尾的tab和空格不符合规范&#xff0c;但是如果在vscode中不显示tab和空格的话&#xff0c;不能及时的查看到并改正&#xff0c;导致提交代码之后还需要再次进行修改&#xff0c;效率比较低。 代码编辑界面如图所示&#…

【大厂AI课学习笔记NO.68】开源和开源发展情况

开源即源代码公开&#xff0c;任何人能获取源代码&#xff0c;查看、修改、分发他们认为合适的代码。 依托同行评审和社区生成&#xff0c;旨在以分散、协作的方式开发。 我们曾经很详细的讨论过开源协议的问题&#xff0c;详细可以参考我的文章&#xff1a; https://giszz.…

CaricatureFace 学习笔记

目录 3d人脸重建开源项目汇总 CaricatureFace 依赖项&#xff1a; 有的电脑安装失败&#xff1a; 3d人脸重建开源项目汇总 3D人脸重建开源项目整理_reconstruction 项目-CSDN博客 2020 CVPR 漫画三维人脸重建) CaricatureFace 依赖项&#xff1a; openmesh 有的电脑安…

高频设计模式

文章目录 高频设计模式单例模式饿汉式&#xff08;Eager Initialization&#xff09;懒汉式&#xff08;Lazy Initialization&#xff09;双重校验锁&#xff08;Double-Checked Locking&#xff09;静态内部类&#xff08;Static Inner Class&#xff09;枚举&#xff08;Enum…