android微信运动页面开发,微信小程序仿微信运动步数排行(交互)

微信小程序仿微信运动步数排行(交互)

发布时间：2020-08-20 00:51:02

来源：脚本之家

阅读：101

作者：祈澈姑娘

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

效果图如下：

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.js

Page({

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

},

});

},

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。