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

效果图如下：

图片.png

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">      <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>

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