时间:2021-05-18
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下:
效果图如下:
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:
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.jsPage({ 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 }); }, }); },})以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信运动怎么计算步数?微信运动计算步数原理是什么?你是不是在微信上经常看微信好友的微信运动步数嗮图哦,您自己的也可以做到哦。微信运动怎么计算步数的?下边是小
微信运动1步等于多少米?微信运动步数等于实际距离多少?微信运动是可以来计算步数的,那么微信运动每步多少米?以下是小编对微信运动1步等于多少米的回答了,如果您
微信运动怎么开启?微信运动在哪?微信开启了微信运动功能以后,微信就会每天计算您的运动步数了,而且在晚上的时候,会把您的运动步数和别人的步数进行比较哦,那么微
以微信7.0.18的微信运动为例,对方的步数为0了的原因是: 1、对方关闭了微信运动的排行榜。 2、对方取消了关注微信运动。 3、系统出现了问题。 4、
微信开启了微信运动功能以后,微信就会每天计算您的运动步数了,而且在晚上的时候,会把您的运动步数和别人的步数进行比较哦,但是如果你不喜欢别人看到怎么办?下面小