溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序仿微信運動步數(shù)排行(交互)

發(fā)布時間：2020-08-20 00:51:02 來源：腳本之家 閱讀：301 作者：祈澈姑娘 欄目：web開發(fā)

本文介紹了微信小程序仿微信運動步數(shù)排行(交互)，分享給大家，也給自己留個筆記，廢話不多說了，具體如下：

效果圖如下：

微信小程序仿微信運動步數(shù)排行(交互)

wxml:

<view class="item-box">
 <view class="items">
  <view wx:for="{{list}}" wx:key="{{index}}" class="item"> 
   <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}"  class="inner txt">
   <image class="item-icon" mode="widthFix" src="{{item.url}}"></image>
    <i> {{item.name}}</i>
   <span class="item-data">
   <i class="rankpace"> {{item.steps}}</i>
   </span>
   
   </view>
  </view>
 </view>
</view>

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;

  //加載數(shù)據(jù)
  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 });
   },
  });
  
 },
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手