微信小程序独家秘笈之左滑删除
一、前期准备工作
软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
1、基本需求。
- 左滑删除
- 设置默认
2、案例目录结构
二、程序实现具体步骤
1.index.wxml代码
<view class="item-box">
<view class="items">
<view wx:for="{{list}}" wx:key="{{index}}" class="item">
<view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" style="{{item.txtStyle}}" class="inner txt">
<image class="item-icon" mode="widthFix" src="{{item.icon}}"></image>{{item.txt}}</view>
<view data-index="{{index}}" bindtap = "delItem" class="inner del">删除</view>
</view>
</view>
</view>
2.index.wxss代码
view{
box-sizing: border-box;
}
.item-box{
width: 700rpx;
margin: 0 auto;
padding:40rpx 0;
}
.items{
width: 100%;
}
.item{
position: relative;
border-top: 2rpx solid #eee;
height: 120rpx;
line-height: 120rpx;
overflow: hidden;
}
.item:last-child{
border-bottom: 2rpx solid #eee;
}
.inner{
position: absolute;
top:0;
}
.inner.txt{
background-color: #fff;
width: 100%;
z-index: 5;
padding:0 10rpx;
transition: left 0.2s ease-in-out;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.inner.del{
background-color: #e64340;
width: 180rpx;text-align: center;
z-index: 4;
right: 0;
color: #fff
}
.item-icon{
width: 64rpx;
vertical-align: middle;
margin-right: 16rpx
}
.thumb{
width: 200px;
height: 200px;
-webkit-overflow-scrolling: touch;
overflow: scroll;
}
3.index.js逻辑代码
a.部分的功能实现
touchM:function(e){
if(e.touches.length==1){
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.data.startX - moveX;
var delBtnWidth = this.data.delBtnWidth;
var txtStyle = "";
if(disX == 0 || disX < 0){//如果移动距离小于等于0,文本层位置不变
txtStyle = "left:0px";
}else if(disX > 0 ){//移动距离大于0,文本层left值等于手指移动距离
txtStyle = "left:-"+disX+"px";
if(disX>=delBtnWidth){
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "left:-"+delBtnWidth+"px";
}
}
//获取手指触摸的是哪一项
var index = e.target.dataset.index;
var list = this.data.list;
list[index].txtStyle = txtStyle;
//更新列表的状态
this.setData({
list:list
});
}
},
touchE:function(e){
if(e.changedTouches.length==1){
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束,手指移动的距离
var disX = this.data.startX - endX;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2,不显示删除按钮
var txtStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:0px";
//获取手指触摸的是哪一项
var index = e.target.dataset.index;
var list = this.data.list;
list[index].txtStyle = txtStyle;
//更新列表的状态
this.setData({
list:list
});
}
},
//获取元素自适应后的实际宽度
getEleWidth:function(w){
var real = 0;
try {
var res = wx.getSystemInfoSync().windowWidth;
var scale = (750/2)/(w/2);//以宽度750px设计稿做宽度的自适应
// console.log(scale);
real = Math.floor(res/scale);
return real;
} catch (e) {
return false;
// Do something when catch error
}
},
initEleWidth:function(){
var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
this.setData({
delBtnWidth:delBtnWidth
});
},
//点击删除按钮事件
delItem:function(e){
//获取列表中要删除项的下标
var index = e.target.dataset.index;
var list = this.data.list;
//移除列表中下标为index的项
list.splice(index,1);
//更新列表的状态
this.setData({
list:list
});
},
三、案例运行效果图
四、总结与备注
暂无微信小程序独家秘笈之左滑删除
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
微信小程序独家秘笈之左滑删除的更多相关文章
- 微信小程序独家秘笈之抽奖大转盘
代码地址如下:http://www.demodashi.com/demo/14209.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序之双重循环(包含左滑删除,以及数据各项处理)
<view wx:for="{{hommer}}" wx:for-item="item" wx:for-index="index" w ...
- 微信小程序setData复杂数组的更新、删除、添加、拼接
众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染.在此分享小程序里复杂数组的更新.删除.添加.拼接 初始数据 数组嵌套对象 data: { cartList = [{ ...
- 微信小程序实现运动步数排行(可删除)
wxml <!-- 向左滑动删除功能 --> <view class="item-box"> <view class="items" ...
- 【微信小程序】:评论、回复和删除功能 -- 2017/7/14
1.理论核心:传参->pid,评论父id需要在wxml页面传递:小程序端和WEB端不同核心:前者操纵数据,后者操纵DOM元素对象 2.不废话,直接代码:wxml <view class=& ...
- 微信小程序图片选择,预览和删除
这里均用的是小程序原生api 废话不多说直接上栗子: <view class="addImv"> <!--这个是已经选好的图片--> <view wx ...
- 微信小程序图片上传放大预览删除代码
效果: 一,下面是上传图片的效果 image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { v ...
- 微信小程序使用字体图标
项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网 ...
- 如何在微信小程序中使用阿里字体图标
第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 ---> 点击“添加入库” ...
随机推荐
- 使用框架帮助Activity规范化
摘要 本文原创,转载请注明地址:http://kymjs.com/code/2015/05/10/01 写给那些在用.想用.还没有用过KJFrame的朋友. KJFrameForAndroid总共分为 ...
- 【docker-compose】docker-compose.yml文本内容详解 + docker-compose命令详解 + docker-compose启动服务容器时区设置
参考地址:https://blog.csdn.net/Kiloveyousmile/article/details/79830810 参考地址:https://docs.docker.com/comp ...
- [翻译] 用 ObjectiveSugar 扩展NSArray NSDictionary NSSet NSNumber
source - https://github.com/supermarin/ObjectiveSugar Look like a girl, act like a lady, think like ...
- Windows和Linux下如何查看端口被哪个进程占用
Windows: C:/Users/ewanbao>netstat -aon|findstr "123" TCP 127.0.0.1:55123 0.0 ...
- Mysql中与时间相关的统计分析
最近项目需要统计一段日期范围内,根据每分钟.几分钟.每天分别统计汇总某些事件/指标的发生总次数,平均发生次数,因此总结了Mysql中与时间处理.统计相关的资料. 按分钟统计某一时间段内的数据 SELE ...
- 借助 Resharper 和 StyleCop 让代码更整洁
一:工具安装 Resharper 和 StyleCop 必须安装. Resharper 的配置文件如下:Resharper.zip 请按如下步骤导入, 1: 2: 3: StyleCope 的配置 ...
- Android Protobuf应用及原理
前言 之前一直忙于移动端日志SDK Trojan的开源工作,已十分稳定地运行在饿了么团队App中,集成了日志加密和解密功能.哎呀,允许我卖个狗皮膏药,不用不知道,用了就知道,从此爱不释手,Trojan ...
- Ubuntu 将应用程序固定到快速启动栏
Ubuntu上没有快捷方式的说法,而通过软件中心安装的软件就有图标,并能加入到启动器上,这是因为它们有一个desktop配置文件的缘故.这些配置文件在/usr/share/applications这个 ...
- C++代码文件名标准化处理工具
工具功能:批量处理C++代码文件,将C++代码文件名中大写字母改为下划线+小写字母. 为了方便代码在不同平台下的移植,代码文件命名规范为:不使用大写字母,单词之间用下划线间隔开.为此写了这个小工具,将 ...
- go语言基础之数组指针做函数参数
1.数组指针做函数参数 示例: package main //必须有个main包 import "fmt" //p指向实现数组a,它是指向数组,它是数组指针 //*p代表指针所指向 ...