快捷導(dǎo)航

微信小程序仿微信運(yùn)動(dòng)步數(shù)排行(交互)

更新時(shí)間：2018年07月13日 14:34:31 作者：祈澈姑娘

這篇文章主要介紹了微信小程序仿微信運(yùn)動(dòng)步數(shù)排行(交互)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

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

效果圖如下：

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}}" style="{{item.txtStyle}}" 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 });
   },
  });
  
 },
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js 與 php 通過json數(shù)據(jù)進(jìn)行通訊示例
這篇文章主要介紹了js與php通過json數(shù)據(jù)進(jìn)行通訊的具體實(shí)現(xiàn),需要的朋友可以參考下
2014-03-03
瀏覽器復(fù)制插件zeroclipboard使用指南
ZeroClipboard 是國(guó)外大神開發(fā)的一個(gè)用于剪貼板復(fù)制的 JS 插件，它是基于 Flash 來(lái)實(shí)現(xiàn)跨瀏覽器的復(fù)制功能的。當(dāng)我們使用 ZeroClipboard 的時(shí)候，它會(huì)悄悄隱藏一個(gè)小小的 Flash 影片(swf)，不會(huì)對(duì)我們的用戶界面造成影響。我們只需要借助它實(shí)現(xiàn)復(fù)制功能就行了。
2016-03-03
Javascript實(shí)現(xiàn)拖拽排序的代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)拖拽排序的代碼，本文在vue運(yùn)行環(huán)境下給大家演示下效果圖，對(duì)js拖拽排序?qū)嵗a感興趣的朋友跟隨小編一起看看吧
2022-09-09
js實(shí)現(xiàn)簡(jiǎn)單模態(tài)窗口，背景灰顯
昨天中午做項(xiàng)目需要一個(gè)模態(tài)窗口，想起上一個(gè)公司的項(xiàng)目經(jīng)理曾經(jīng)做過一個(gè)比較牛的模態(tài)窗口，至今沒用搞清楚實(shí)現(xiàn)原理，平時(shí)也沒有時(shí)間去分析，試著自己做了一個(gè)，用了一天的時(shí)間終于完成了，給大家一起分享，也希望高手多提意見。第一次在博客園上發(fā)文章，挺高興的。
2008-11-11
Vue指令的鉤子函數(shù)使用方法
這篇文章主要為大家詳細(xì)介紹了Vue指令的鉤子函數(shù)使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
Three.js 再探 - 寫一個(gè)微信跳一跳極簡(jiǎn)版游戲
最近項(xiàng)目結(jié)束，很空閑，于是就試著仿照微信跳一跳寫了一個(gè)極簡(jiǎn)版的游戲，到底簡(jiǎn)單到什么程度呢?大家可以參考下本文
2018-01-01
BootStrap扔進(jìn)Django里的方法詳解
這篇文章主要介紹了BootStrap扔進(jìn)Django里的方法，小編認(rèn)為本文介紹的不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
微信小程序?qū)崿F(xiàn)加入購(gòu)物車滑動(dòng)軌跡
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)加入購(gòu)物車滑動(dòng)軌跡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
解析JavaScript中instanceof對(duì)于不同的構(gòu)造器或許都返回true
這篇文章主要是對(duì)JavaScript中instanceof對(duì)于不同的構(gòu)造器或許都返回true進(jìn)行了詳細(xì)的解析，需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12