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

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

效果图如下：

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

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