扣丁学堂HTML5培训如何实现仿微信运动步数排行(交互)

2018-07-17 14:58:10 1008浏览

今天扣丁学堂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>
　　{{item.name}}
　　<spanclass="item-data">
　　<iclass="rankpace">{{item.steps}}
　　</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});
　　},
　　});
　　},
　　})

以上就是关于微信小程序仿微信运动步数排行(交互)的全部内容，希望对大家的学习有所帮助，想要了解更多内容的小伙伴可以关注我们的官方微信公众号或者直接登录扣丁学堂官网咨询。扣丁学堂有更多最新的学习资讯以及大量精品学习教程视频可供大家免费参考观看，想要成为HTML5开发topone的小伙伴们现在就开始行动吧。扣丁学堂H5技术交流群：559883758。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>