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

本文介绍了微信小程序仿微信运动步数排行(交互)，分享给大家，也给自己留个笔记，废话不多说了，具体如下：

效果图如下：

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.js
Page({
 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 });
   },
  });
  
 },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。