微信小程序左滑删除未操作有复位效果
1、wxml
<!--pages/test/test.wxml-->
<view class="page"> <movable-area class="m_a" wx:for="{{plist}}" wx:key="*this" wx:for-index="id" >
<movable-view class="data_list" direction="horizontal" inertia="true" x="{{item.leftx}}" out-of-bounds="true" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{id}}" > <view class="d_box">
<view class="data">{{item.title}}</view>
<view>删除</view>
</view>
</movable-view>
</movable-area> </view>
2.wxss
/* pages/test/test.wxss */
.page{
width: 100vw;
height: 100vh;
}
.m_a{
width: 100%;
height: 200rpx;
border: 1rpx solid gray;
}
.data_list{
height: 200rpx;
width: 120%;
border: 1rpx solid red;
}
.d_box{
display: flex;
justify-content: flex-start;
justify-items: center;
height: 100%;
}
.data{
width: 100vw;
background: red;
}
3.js
// pages/test/test.js
Page({ /**
* 页面的初始数据
*/
data: {
plist: [{ "title": "内容内容13131", "leftx": 0 }, { "title": "asdasd内容13131", "leftx": 0 }, { "title": "a是sd内容13131", "leftx": 0 }, { "title": "as水电费多个d内容13131", "leftx": 0 }],
pcontrolWidth: 200,
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 触摸开始
*/
touchS: function (e) {
let index = e.currentTarget.dataset.index;
//遍历复位
this.data.plist.forEach(function (item, key) {
if (key != index) {
item.leftx = 0;
} });
//复位后,赋值
this.setData({
plist: this.data.plist,
}); if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startX: e.touches[0].clientX
});
} },
/**
* 触摸移动
*/
touchM: function (e) {
console.log(e);
let index = e.currentTarget.dataset.index;
var endX = e.touches[0].clientX;
var disX = this.data.startX - endX;
var pcontrolWidth = this.data.pcontrolWidth;
var left = 0;
if (disX <= 0) {
left = 0;
} else if (disX > 0) {
left = disX;
if (disX >= pcontrolWidth) {
//控制手指移动距离最大值为删除按钮的宽度
left = pcontrolWidth;
}
} this.data.plist[index].leftx = -left;
this.setData({
plist: this.data.plist,
});
console.log(this.data.plist); },
/**
* 触摸结束
*/
touchE: function (e) { } })
微信小程序左滑删除未操作有复位效果的更多相关文章
- 微信小程序左滑删除功能
效果图如下: wxml代码: <view class="container"> <view class="touch-item {{item.isTou ...
- 微信小程序左滑删除
<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index=&qu ...
- 运用wxs制作微信小程序左滑功能和跳转,性能更优越
锲子 微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅.如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20 ...
- 微信小程序左滑显示按钮demo
wxml结构(删除部分代码): <view class="chapter-item" wx:for="{{klgData}}" data-index=&q ...
- 微信小程序 confirm(删除提示)提示框,询问框,小程序操作成功提示后跳转
微信小程序删除处理 没有 confrim 那怎么实现这个效果呢 可以使用小程序里的模态框 代码: wx.showModal({ title: '提示', content: '确定要删除吗?', suc ...
- 微信小程序实现滑动删除效果
在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...
- 微信小程序:如何删除所有的console.log?
使用vscode正则匹配,手动去除 1.用vscode打开微信小程序项目 2.Edit-----replace in Files 1. console.log()加了分号 console\.log\( ...
- 微信小程序开发中如何实现侧边栏的滑动效果?
原文链接:https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ 1 概述 在手机应用的开发中侧边栏滑动是很常见的功能,当然在小程序中也不会例外,很多特效还 ...
- 微信小程序添加、删除class’
终于等到公司开发小程序了,学习的时候不觉得有什么,实际开发就会出现各种问题. 今天第一天开发就遇到问题了. 项目需求,要一个平时的nav导航栏,这玩意用jQuery两行代码解决了,可是小程序不允许操作 ...
随机推荐
- RestTemplate对象,进行get和post简单用法
如果只是针对纯Rest接口处理的话,我们可以使用restTemplate对象来操作,简单方便,可以不需要手写httpClient代码了. 我们看下基本的用法,如下: 1.getForObject cl ...
- Java--8--新特性--Optional--有效防止空指针异常
Optional<T> 类(java.util.Optional) 是一个容器类,代表一个值存在或不存在,原来用 null 表示一个值不存在,现在 Optional 可以更好的表达这个概念 ...
- SQL进阶系列之0窗口函数
窗口函数 What's 窗口函数? 窗口函数也称为OLAP(OnLine Analytical Processing)函数,目前MySQL还不支持. 窗口函数的语法 <窗口函数> OVER ...
- 微信小程序~调试
小程序调试面板 模拟器 模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态. 自定义编译 点击工具栏中的编译按钮或者使用快捷键 Ctrl(⌘) + B ...
- 0032ActiveMQ之java编码实现生产者和消费者操作队列queue
今天学习了入门级的用java编写生产者producer和消费者consumer操作activemq的queue队列,为了之后复习回顾,现做整理如下: maven工程的搭建此处不再讲解,在maven工程 ...
- 结构型模式(五) 外观模式(Facade)
一.动机(Motivate) 在软件系统开发的过程中,当组件的客户(即外部接口,或客户程序)和组件中各种复杂的子系统有了过多的耦合,随着外部客户程序和各子系统的演化,这种过多的耦合面临很多变化的挑战. ...
- 详解C++中基类与派生类的转换以及虚基类
很详细!转载链接 C++基类与派生类的转换在公用继承.私有继承和保护继承中,只有公用继承能较好地保留基类的特征,它保留了除构造函数和析构函数以外的基类所有成员,基类的公用或保护成员的访问权限在派生类中 ...
- 模拟赛 提米树 题解 (DP+思维)
题意: 有一棵棵提米树,满足这样的性质: 每个点上长了一定数量的Temmie 薄片,薄片数量记为这个点的权值,这些点被标记为 1 到 n 的整数,其 中 1 号点是树的根,没有孩子的点是树上的叶子. ...
- 洛谷 P1854 花店橱窗布置 题解
Analysis 给定一个f*v的矩阵 要求从第一行走到第f行,每行取走一个数, 且该行所取的数必须必上一行所取的数的列数大 , 求所能取走的最大值 注意每一行所取走的数字的列数必须大于等该行的行号 ...
- Kubernetes 学习23 kubernetes资源指标API及自定义指标API
一.概述 1.上集中我们说到,官方文档提示说从k8s 1.11版本开始,将监控体系指标数据获取机制移向新一代的监控模型.也就意味着对于我们的k8s来讲现在应该有这样两种资源指标被使用.一种是资源指标, ...