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


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 相关文章推荐
Confirmer JQuery确认对话框组件
Jun 09 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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
php中取得文件的后缀名?
2012/02/20 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Django密码存储策略分析
2020/01/09 Python
python sorted函数原理解析及练习
2020/02/10 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
员工培训心得体会
2013/12/30 职场文书
装饰活动策划方案
2014/02/11 职场文书
保密承诺书
2014/03/27 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
实习推荐信格式模板
2015/03/27 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis
利用Python实现模拟登录知乎
2022/05/25 Python