Java微信运动步数排序设计,微信小程序仿微信运动步数排行-交互

效果图如下：

图片.png

wxml:

 {{item.name}}

 {{item.steps}}

wxss：/* pages/leftSwiperDel/index.wxss */view{    box-sizing: border-box;

}.item-box{    width: 700rpx;    margin: 0 auto;    padding:40rpx 0;

}.items{    width: 100%;

}.item{    position: relative;    border-top: 2rpx solid #eee;    height: 120rpx;    line-height: 120rpx;    overflow: hidden;

}.item:last-child{    border-bottom: 2rpx solid #eee;

}.inner{    position: absolute;    top:0;

}.inner.txt{    background-color: #fff;    width: 100%;    z-index: 5;    padding:0 10rpx;    transition: left 0.2s ease-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.jsPage({  data: {    list: null,

},  onLoad: function (options) {    var that = 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 });

},

});

},

})原文作者：祈澈姑娘

作者：祈澈菇凉

链接：https://www.jianshu.com/p/bb7131114993