效果图如下:

图片.png

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

原文作者:祈澈姑娘

技术博客:https://www.jianshu.com/u/05f416aefbe1

90后前端妹子,爱编程,爱运营,爱折腾。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家加入群聊,一起探讨交流。

微信小程序仿微信运动步数排行-交互的更多相关文章

  1. 微信小程序--仿微信小程序朋友圈Pro(内容发布、点赞、评论、回复评论)

    微信小程序--仿微信小程序朋友圈Pro(内容发布.点赞.评论.回复评论) 项目开源地址M朋友圈Pro 求个Star 项目背景 ​ 基于原来的开源项目 微信小程序仿朋友圈功能开发(发布.点赞.评论等功能 ...

  2. 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  3. 微信小程序< 3 > ~ 微信小程序开源项目合集

    简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...

  4. 微信小程序(微信应用号)开发ide安装解决方法

    这两天整个技术圈都炸锅了,微信小程序(微信应用号)发布内测,首批200家收到邀请,但是没受邀请的同学,也不用担心,下面介绍一下解决方法. 首先需要下载ide,昨天只需要下载0.9版本的编辑器并替换文件 ...

  5. 微信小程序(原名微信应用号)开发工具0.9版安装教程

    微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名 ...

  6. 微信小程序之微信登陆 —— 微信小程序教程系列(20)

    简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自 ...

  7. 微信小程序(微信应用号)组件讲解[申明:来源于网络]

    微信小程序(微信应用号)组件讲解[申明:来源于网络] 地址:http://www.cnblogs.com/muyixiaoguang/p/5902008.html

  8. 微信小程序和微信公众号的id是一个吗

    首先,简单说下我遇到的问题是我们的程序调用微信小程序得到openid,然后通过openID得到用户的唯一标识,用户得以登录,然而,当我们调用微信公众号也同样的到openid,同一以用户两个不同的ope ...

  9. [转]微信小程序、微信公众号、H5之间相互跳转

    本文转自:https://www.cnblogs.com/colorful-paopao1/p/8608609.html 转自慕课网 一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加 ...

随机推荐

  1. C. Diverse Permutation(Codeforces Round #275(div2)

    C. Diverse Permutation time limit per test 1 second memory limit per test 256 megabytes input standa ...

  2. Intellij Idea创建的第一个JavaWeb程序

    第一个JavaWeb程序 1. 创建 2. 目录结构 src目录用于放java源文件,web目录用于放web资源,WEB-INF是Java web应用固定的存放配置及类库的目录,index.jsp是我 ...

  3. nyoj--19--擅长排列的小明(dfs)

    擅长排列的小明 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想为难 ...

  4. 【Linux】JDK+Eclipse 搭建C/C++开发环境

    注:本文所提供的参考示例是在CentOS Linux环境下的安装,不保证适用于其他版本的Linux系统. ·    安装前的注意事项 编译源代码是需要对应的代码编译工具的,本文中安装的Eclipse只 ...

  5. 链接服务器T-sql语句

    https://bbs.csdn.net/topics/230059074 https://www.cnblogs.com/vinsonLu/p/4456027.html 不同服务器数据库之间的数据操 ...

  6. Debian9.5解决在root用户下启用VNC后lightdm+Xfce4只能使用root登录,其他用户无法登陆

    Debian9.5解决在root用户下启用VNC后lightdm+Xfce4只能使用root登录,其他用户无法登陆 最近在研究debian9.5 VNC的问题,当VNC使用tightVNC或tiger ...

  7. ZOJ 3435 Ideal Puzzle Bobble 莫比乌斯反演

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4119 依然是三维空间内求(1,1,1)~(a,b,c)能看到的整点数,平移一下 ...

  8. android-开发环境相关概念

    Android中IDE.ADT.SDK.JDK.NDK的解释 1. IDE: Intelligent Development Environm的简称.即智能开发环境.是一种开发工具.常用的IDE有ad ...

  9. 47.Express文件上传

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html 文件上传 以下我们创建一个用于上传文件的表单,使用 POST 方法,表单 e ...

  10. C++ 补课 (三)

    1,枚举类型 —— 下标自0开始 enum 枚举类型名 { 常数表 } 2,C++ 的异常处理机制实际上是一种运行时通知机制 3,delete p;只是删除指针p指向内存区,并不是删除指针p,所以p还 ...