微信小程序十大排行榜-微信小程序仿微信运动步数排行-交互-小程序排名-即速应用

微信小程序十大排行榜-微信小程序仿微信运动步数排行-交互-小程序排名

浏览量：2002 时间：2020-03-20 来源：祈澈菇凉

1.效果图如下：
图片.png
2.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}}"/imagei{{item.name}}/ispanclass="item-data"iclass="rankpace"{{item.steps}}/i/span/view/view/view/view
3.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;}
4.js:
//pages/leftSwiperDel/index.jsPage({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});},});},})
5.原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
6.90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家加入群聊，一起探讨交流。