微信小程序实现运动步数排行功能(可删除)


Posted in Javascript onJuly 05, 2018

效果图如下所示:

微信小程序实现运动步数排行功能(可删除)

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
  });
 }
})

总结

以上所述是小编给大家介绍的微信小程序实现运动步数排行功能(可删除),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中“基本类型”之争小结
Jan 03 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 #Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 #Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 #Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 #Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 #Javascript
微信小程序实现左右联动的实战记录
Jul 05 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python创建xml的方法
2015/03/10 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
如何理解Python中的变量
2020/06/01 Python
python tqdm库的使用
2020/11/30 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
银行优秀员工事迹材料
2014/05/29 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书