微信小程序仿微信运动步数排行(交互)

<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.url}}"></image>    <i> {{item.name}}</i>   <span class="item-data">   <i class="rankpace"> {{item.steps}}</i>   </span>      </view>  </view> </view></view>

/* 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;}

// pages/leftSwiperDel/index.jsPage({ data: {  list: null, }, onLoad: function (options) {  var that = this;  //加载数据  wx.request({   url: "https://pig.intmote.com/bison_xc/wx/sort.do",   method: 'GET',   header: {    'Content-type': 'application/json'   },   success: function (res) {    console.log(res.data)    that.setData({ list: res.data });   },  });   },})