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


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



效果图如下：





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: "http://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 });

   },

  });

  

 },

})







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