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


            效果图如下所示：



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

  });

 }

})



总结

以上所述是小编给大家介绍的微信小程序实现运动步数排行功能（可删除），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！