微信小程序仿微信运动步数排行(交互)


Posted in Javascript onJuly 13, 2018

本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下:

效果图如下:

微信小程序仿微信运动步数排行(交互)

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 });
   },
  });
  
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
javascript动态加载三
Aug 22 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
Vue自定义指令详解
Jul 28 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
vue实现固定位置显示功能
May 30 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 #Javascript
JS实现select选中option触发事件操作示例
Jul 13 #Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 #Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 #Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 #Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 #Javascript
You might like
php中批量替换文件名的实现代码
2011/07/20 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php常见的魔术方法详解
2014/12/25 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
python打包多类型文件的操作方法
2020/09/21 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
化工专业应届生求职信
2013/11/08 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
操行评语大全
2014/04/30 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
初中作文评语
2014/12/25 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS