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

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

阜康网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

效果图如下：

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

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

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

网站栏目：微信小程序仿微信运动步数排行(交互)
转载来源：http://scjbc.cn/article/gpoess.html

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

其他资讯