微信小程序仿微信运动步数排行(交互)
2018-07-13 14:34
633 查看
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下:
效果图如下:
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; //加载数据 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 }); }, }); }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序实现运动步数排行功能(可删除)
- 微信小程序微信运动步数处理
- 微信小程序解密微信运动数据
- 微信小程序 数据交互与渲染实例详解
- 2017QQ,微信安卓修改运动步数APP无限刷步数方法教程
- 微信小程序使用WebService(Asp.net)进行数据交互
- 从零开始学微信小程序开发:7 交互反馈
- 从零开始学微信小程序开发:9 与后台交互
- 微信小程序开发(三)--交互反馈
- 【小程序+ thinkphp5】 获取微信运动数据
- 微信小程序电商平台购物车交互功能
- 微信小程序开发-交互反馈
- 微信小程序入门二之逻辑层与表现层的数据交互
- 微信小程序开发-解密微信运动数据
- 微信小程序开发-解密微信运动数据
- 微信小程序--ajax服务器交互及页面渲染
- 微信小程序----界面交互反馈API(wx.showToast(OBJECT)、wx.showModal(OBJECT))(MUI消息框)
- 微信小程序填坑之路之springmvc与小程序的数据交互(json)
- 微信小程序基础之交互操作控件
- 微信小程序转发链接交互逻辑