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

今天扣丁学堂HTML5培训老师给大家介绍一下关于微信小程序中微信运动计步器是怎么实现的，下面我们来看一下如何实现仿微信运动步数排行(交互)及源码分享。

　　效果图如下：

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

　　},

　　});

　　},

　　})

　　以上就是关于微信小程序仿微信运动步数排行(交互)的全部内容，希望对大家的学习有所帮助。