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">
<i>{{item.rank}}</i>
<image class="item-icon" mode="widthFix" src="{{item.icon}}"></image>
<i> {{item.name}}</i>
<span class="item-data"> <i class="rankpace"> {{item.pace}}</i>
<!-- <span class="rankxin">{{item.xin}}</span> -->
</span> </view> <view data-index="{{index}}" bindtap = "delItem" class="inner del">删除</view>
</view>
</view>
</view>

wxss

/* pages/leftSwiperDel/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;
height: 64rpx;
vertical-align: middle;
margin-right: 16rpx;
margin-left:13px;
border-radius:50%; } .item-data{
float: right;
margin-right:5%;} .rankpace{
color: #fa7e04;
}

js

// pages/leftSwiperDel/index.js
Page({
data: {
delBtnWidth: 180//删除按钮宽度单位(rpx)
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
this.initEleWidth();
this.tempData();
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
},
touchS: function (e) {
if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startX: e.touches[0].clientX
});
}
},
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
});
},
//测试临时数据
tempData: function () {
var list = [
{
rank: "1",
txtStyle: "",
icon: "/images/my.png",
name: "李飞",
pace: "23456", },
{
rank: "2",
txtStyle: "",
icon: "/images/my.png",
name: "张叶",
pace: "23450", },
{
rank: "3",
txtStyle: "",
icon: "/images/my.png",
name: "王小婷",
pace: "22345", },
{
rank: "4",
txtStyle: "",
icon: "/images/my.png",
name: "袁经理",
pace: "21687", },
{
rank: "5",
txtStyle: "",
icon: "/images/my.png",
name: "陈雅婷",
pace: "21680", },
{
rank: "6",
txtStyle: "",
icon: "/images/my.png",
name: "许安琪",
pace: "20890", },
{
rank: "7",
txtStyle: "",
icon: "/images/my.png",
name: "里俊飞",
pace: "20741", },
{
rank: "8",
txtStyle: "",
icon: "/images/my.png",
name: "李小俊",
pace: "19511", },
{
rank: "9",
txtStyle: "",
icon: "/images/my.png",
name: "陈俊飞",
pace: "19501", },] //
this.setData({
list: list
});
} })



注:

原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

公众号回复“1”,拉你进程序员技术讨论群.

微信小程序实现运动步数排行(可删除)的更多相关文章

  1. 微信小程序-收货地址左滑删除

    我参照了其中的部分代码,如:bindtouchstart,bindtouchmove,bindtouchend事件多数组中偏移值的更改, 在结合微信 movable-area 和 movable-vi ...

  2. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  3. 微信小程序——编辑

    记录一下 微信小程序分页编辑,可增页删除当前页面.第一页为主图片和主句子.其他页面一致. 左滑右滑可切换页面.每页可增加0到1页.小黑点与页面一致. /* pages/booktool/write/w ...

  4. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  5. 微信小程序开发系列二:微信小程序的视图设计

    大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

  6. 微信小程序 初步认识一(微信运动步数)

    1.注册微信小程序 2.安装小程序开发工具 3.实例(显示微信运动步数) 4.后端处理(c#) 一 注册微信小程序 注册地址:https://mp.weixin.qq.com/cgi-bin/regi ...

  7. 微信小程序可以转发给微信好友了

    微信小程序又放大招了:小程序页面可以放置转发按钮,分享更流畅.同时开放了微信运动步数.背景音乐播放等更多基础能力.小程序可以在自己的页面上放置转发按钮,用户点击后,即可将喜欢的内容分享给好友或群聊,体 ...

  8. 微信小程序多宫格抽奖

    最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...

  9. timestamp时间戳的应用(微信小程序开发也一样)

    在微信小程序开发时发现一个timestamp的时间戳的变量 比如获取微信运动步数时候 timestamp是如何形成的在JS中 是这么形成的 var timestamp = Date.parse(new ...

随机推荐

  1. 调用google翻译

    1. [代码]maven依赖     ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <dependency>     <groupId>org.a ...

  2. js实现动态添加事件

    js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...

  3. 漫漫人生路,学点Jakarta基础-Java8函数式编程

    接口默认方法 Java8版本以后新增了接口的默认方法,不仅仅只能包含抽象方法,接口也可以包含若干个实例方法.在接口内定义实例方法(但是注意需要使用default关键字) 在此定义的方法并非抽象方法,而 ...

  4. git --- ! [rejected] master -> master (non-fast-forward)

    如何解决failed to push some refs to git Administrator@PC-20150110FGWU /K/cocos2d/yc (master) $ git push ...

  5. mvc表单Form提交 --实体

    1.方式1:字段加验证 @model MvcWeb.Models.UserInfo @{ ViewBag.Title = "Add"; } <h2>Add</h2 ...

  6. Kinect 开发 —— 进阶指引 (下)

    运动识别 利用运动识别(motion detection)来进行近景识别是最有意思的一种方式.实现运动识别的基本原理是设置一个起始的基准RGB图像,然后将从摄像头获取的每一帧影像和这个基准图像进行比较 ...

  7. IntelliJ IDEA基于maven构建的web项目找不到jar包

    基于maven构建的springMVC项目,下载好jar包import后,运行提示ClassNotFoundException: java.lang.ClassNotFoundException: o ...

  8. 关于multiprocessing,我也来聊几句

    起因:近期须要从hbase中向 ES中导一批数据.使用multiprocessing 启动多个程序同一时候向ES导数据.能够大大提高效率.由于导数的任务是能够依照时间切割的. 一段简单的代码例如以下: ...

  9. Linux网络编程--字节序

    1 .谈到字节序,那么会有朋友问什么是字节序 非常easy:[比如一个16位的整数.由2个字节组成,8位为一字节,有的系统会将高字节放在内存低的地址上,有的则将低字节放在内存高的地址上,所以存在字节序 ...

  10. RelativeLayout-代码中成员控件width height

    今天需要在代码中动态的设置一个textview的width跟height属性,记录下来. textview在xml中的布局如下 <RelativeLayout android:layout_wi ...