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

效果图如下：

图片.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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{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 });
      },
    });
    
  },
})

原文作者：祈澈姑娘

作者：祈澈菇凉
链接：https://www.jianshu.com/p/bb7131114993