今天扣丁学堂HTML5培训老师给大家介绍一下关于微信小程序中微信运动计步器是怎么实现的，下面我们来看一下如何实现仿微信运动步数排行(交互)及源码分享。
wxml:
<viewclass="item-box">
<viewclass="items">
<viewwx:for="{{list}}"wx:key="{{index}}"class="item">
<viewbindtouchstart="touchS"bindtouchmove="touchM"bindtouchend="touchE"data-index="{{index}}"style="{{item.txtStyle}}"class="innertxt">
<imageclass="item-icon"mode="widthFix"src="{{item.url}}"></image>
<i>{{item.name}}</i>
<spanclass="item-data">
<iclass="rankpace">{{item.steps}}</i>
</span>
</view>
</view>
</view>
</view>效果图如下：
wxss：
/*pages/leftSwiperDel/index.wxss*/
view{
box-sizing:border-box;
}
.item-box{
width:700rpx;
margin:0auto;
padding:40rpx0;
}
.items{
width:100%;
}
.item{
position:relative;
border-top:2rpxsolid#eee;
height:120rpx;
line-height:120rpx;
overflow:hidden;
}
.item:last-child{
border-bottom:2rpxsolid#eee;
}
.inner{
position:absolute;
top:0;
}
.inner.txt{
background-color:#fff;
width:100%;
z-index:5;
padding:010rpx;
transition:left0.2sease-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){
varthat=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});
},
});
},
})以上就是关于微信小程序仿微信运动步数排行(交互)的全部内容，希望对大家的学习有所帮助。