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


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 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
原生JavaScript实现贪吃蛇游戏
Nov 04 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中的超全局变量
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php中常用的预定义变量小结
2012/05/09 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
学生信息管理系统python版
2018/10/17 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
基于python使用tibco ems代码实例
2019/12/20 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
幼儿园门卫制度
2014/01/29 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
主题班会开场白
2015/06/01 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
详解thinkphp的Auth类认证
2021/05/28 PHP