微信小程序仿微信運動步數(shù)排行(交互)
更新時間：2018年07月13日 14:34:31 作者：祈澈姑娘
這篇文章主要介紹了微信小程序仿微信運動步數(shù)排行(交互)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了微信小程序仿微信運動步數(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}}" 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 });
},
});
},
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
js 與 php 通過json數(shù)據(jù)進行通訊示例
這篇文章主要介紹了js與php通過json數(shù)據(jù)進行通訊的具體實現(xiàn),需要的朋友可以參考下2014-03-03
ZeroClipboard 是國外大神開發(fā)的一個用于剪貼板復制的 JS 插件，它是基于 Flash 來實現(xiàn)跨瀏覽器的復制功能的。當我們使用 ZeroClipboard 的時候，它會悄悄隱藏一個小小的 Flash 影片(swf)，不會對我們的用戶界面造成影響。我們只需要借助它實現(xiàn)復制功能就行了。2016-03-03
這篇文章主要介紹了Javascript實現(xiàn)拖拽排序的代碼，本文在vue運行環(huán)境下給大家演示下效果圖，對js拖拽排序實例代碼感興趣的朋友跟隨小編一起看看吧2022-09-09
昨天中午做項目需要一個模態(tài)窗口，想起上一個公司的項目經理曾經做過一個比較牛的模態(tài)窗口，至今沒用搞清楚實現(xiàn)原理，平時也沒有時間去分析，試著自己做了一個，用了一天的時間終于完成了，給大家一起分享， 也希望高手多提意見。第一次在博客園上發(fā)文章，挺高興的。2008-11-11
這篇文章主要為大家詳細介紹了Vue指令的鉤子函數(shù)使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
最近項目結束，很空閑，于是就試著仿照微信跳一跳寫了一個極簡版的游戲，到底簡單到什么程度呢?大家可以參考下本文2018-01-01
這篇文章主要介紹了BootStrap扔進Django里的方法，小編認為本文介紹的不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)加入購物車滑動軌跡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡易的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
解析JavaScript中instanceof對于不同的構造器或許都返回true
這篇文章主要是對JavaScript中instanceof對于不同的構造器或許都返回true進行了詳細的解析，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12