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

效果图如下：

wxml:

view class=' item-box ' view class=' items ' view wx : for=' { { list } } ' wx : key=' { { index } } ' class=' item ' view bind Touch start=' Touch ' bind Touch move=' Touch ' bind Touch end=' Touch ' data-index=' { { index } } ' style=' { { item。txt style } } ' class=' inner txt ' image class=' item-icon ' mode=' width fix ' src=' http 3

/* pages/leftSwiperDel/index。wxss */view { box-size :边框-box；}.项目箱{ width : 700 rpxmargin : 0 auto add :40 rpx 0；}.项目{宽度： 100%；}.项目{位置：相对；边框-top: 2rpx实心# eeeheight: 120rpx线高： 120 rpx飞越：隐藏；} .项目：最后一个孩子{边框-底部： 2r px实心# eee}.内部{位置：绝对值；top:0}。内心。txt {底色： # fff宽度： 100%;z指数： 5；划水：0 10 rpextransion :左0.2s轻松进出；空白：无说唱；飞越：隐藏；文本溢出：省略号；} .内心。del {底色： # e 64340宽度： 180 rpx文本对齐：中心；z-index : 4；右： 0；color: #fff} .项目图标{ width : 64 rpx h8 : 64 rpx垂直对齐： 中间；右边距： 16rpx左边距左：13px边界半径：50%;}.项目-数据{右侧浮动：保证金-右侧：5%;}.rank pace { color : # fa7e 04 } js :

//page/LeftSwiperDel/index。js页面({ data : { list : null，}，onLoad:函数（选项){ var=this//加载数据wx。请求({ URL : ' https://猪。国际长途。com/bison _ xc/wx/sort。do '，method: 'GET '，header : { ' Content-type ' : ' application/JSON ' }，success 3360 function(RES){ console。记录数据。setdata({ list : RES . data })；}, });},})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。