微信小程序运动步数java_微信小程序实现运动步数排行(可删除)
wxml
{{item.rank}}
{{item.name}}
{{item.pace}}
删除
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: {
delBtnWidth: 180//删除按钮宽度单位(rpx)
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
this.initEleWidth();
this.tempData();
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
},
touchS: function (e) {
if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startX: e.touches[0].clientX
});
}
},
touchM: function (e) {
if (e.touches.length == 1) {
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.data.startX - moveX;
var delBtnWidth = this.data.delBtnWidth;
var txtStyle = "";
if (disX == 0 || disX < 0) {//如果移动距离小于等于0,文本层位置不变
txtStyle = "left:0px";
} else if (disX > 0) {//移动距离大于0,文本层left值等于手指移动距离
txtStyle = "left:-" + disX + "px";
if (disX >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "left:-" + delBtnWidth + "px";
}
}
//获取手指触摸的是哪一项
var index = e.target.dataset.index;
var list = this.data.list;
list[index].txtStyle = txtStyle;
//更新列表的状态
this.setData({
list: list
});
}
},
touchE: function (e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束,手指移动的距离
var disX = this.data.startX - endX;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2,不显示删除按钮
var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
//获取手指触摸的是哪一项
var index = e.target.dataset.index;
var list = this.data.list;
list[index].txtStyle = txtStyle;
//更新列表的状态
this.setData({
list: list
});
}
},
//获取元素自适应后的实际宽度
getEleWidth: function (w) {
var real = 0;
try {
var res = wx.getSystemInfoSync().windowWidth;
var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应
// console.log(scale);
real = Math.floor(res / scale);
return real;
} catch (e) {
return false;
// Do something when catch error
}
},
initEleWidth: function () {
var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
this.setData({
delBtnWidth: delBtnWidth
});
},
//点击删除按钮事件
delItem: function (e) {
//获取列表中要删除项的下标
var index = e.target.dataset.index;
var list = this.data.list;
//移除列表中下标为index的项
list.splice(index, 1);
//更新列表的状态
this.setData({
list: list
});
},
//测试临时数据
tempData: function () {
var list = [
{
rank: "1",
txtStyle: "",
icon: "/images/my.png",
name: "李飞",
pace: "23456",
},
{
rank: "2",
txtStyle: "",
icon: "/images/my.png",
name: "张叶",
pace: "23450",
},
{
rank: "3",
txtStyle: "",
icon: "/images/my.png",
name: "王小婷",
pace: "22345",
},
{
rank: "4",
txtStyle: "",
icon: "/images/my.png",
name: "袁经理",
pace: "21687",
},
{
rank: "5",
txtStyle: "",
icon: "/images/my.png",
name: "陈雅婷",
pace: "21680",
},
{
rank: "6",
txtStyle: "",
icon: "/images/my.png",
name: "许安琪",
pace: "20890",
},
{
rank: "7",
txtStyle: "",
icon: "/images/my.png",
name: "里俊飞",
pace: "20741",
},
{
rank: "8",
txtStyle: "",
icon: "/images/my.png",
name: "李小俊",
pace: "19511",
},
{
rank: "9",
txtStyle: "",
icon: "/images/my.png",
name: "陈俊飞",
pace: "19501",
},]
//
this.setData({
list: list
});
}
})
微信小程序运动步数java_微信小程序实现运动步数排行(可删除)相关推荐
- 微信小程序运动步数java_微信小程序实现运动步数排行功能(可删除)
效果图如下所示: wxml {{item.rank}} {{item.name}} {{item.pace}} 删除 wxss /* pages/leftSwiperDel/index.wxss */ ...
- 微信跳一跳怎么修改java_微信跳一跳怎么用抓包修改分数_改数据[多图]
这里给大家提供抓包工具修改分数的教程,以及抓包工具的安装包,请大家仔细看教程,放心使用. 如果玩家们觉得跳一跳玩起来很难,不想自己跳,可以看看下面的微信跳一跳辅助合集,里面包含了各种版本的跳一跳辅助, ...
- 微信支付图片上传java_微信开发-----微信公众号调用微信上传图片接口
$(function () { var url = location.href.split('#')[0]; var date = "url=" + url; //get中url指 ...
- 微信jssdk 图片上传 JAVA_微信jssdk图片上传
classJSSDK {private $appId;private $appSecret;public function __construct($appId, $appSecret) {$this ...
- 微信扫码支付demo java_微信扫码支付JavaDemo
[实例简介] 完全可用的微信扫码支付JavaDemo,如不能使用请站内联系本人 [实例截图] [核心代码] weChatpay_demo └── weChatpay_demo ├── src │ ...
- 微信退款通知req_info解密java_微信退款通知信息解密
在最近的开发需求中,有一个需求,就是需要把微信退款通知记录在数据库中,原本以为是一个简单的需求,但是微信文档的坑,是你不能理解的. 在微信退款通知返回的字段中有一个加密信息字段req_info.这个加 ...
- 微信分享到朋友圈java_微信开发(三)微信分享朋友朋友圈
这里基于微信的都是需要用到参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68 ...
- php 小程序 运动步数_微信小程序步数运动-收益讲解
不得不佩服,步数小程序的厉害之处. 把闲散的运动步数,转化成一种可量化的社交货币,流动保存起来,探索出一种门槛低,又健康的经济模式. 对用户,真金白银的刺激,免费步数换取/抵现商品,红包,充值卡等. ...
- JavaScript 允许自定义对象,运动兑换商品的小程序,微信步数兑换积分,会员营销软件,让顾客更加愿意来店消费,提升店铺的会员粘性及活越性
访问对象的属性 属性是与对象相关的值. 访问对象属性的语法是: objectName.propertyName 这个例子使用了 String 对象的 length 属性来获得字符串的长度: var m ...
最新文章
- 条件随机场(CRF) - 4 - 学习方法和预测算法(维特比算法)
- 多图详解教程:Eclipse 3.6连接Tomcat 7
- 请问这个解法的时间复杂度怎么分析?谢谢!
- 网络编程预备知识之IP地址和端口
- Shell+Linux命令实现日志分析
- 2.3 词嵌入的特性-深度学习第五课《序列模型》-Stanford吴恩达教授
- 全球及中国凝胶植入物市场专项调研与供需现状分析报告2022年
- java遍历文件夹并把所有文件放到list中
- postgreSQL的索引
- Python基础day07 作业解析【文件操作(文件读写、文件夹操作)】
- 跌倒识别 摔倒识别 -lightweight_openpose
- sql自定义函数学习思路_学习SQL:用户定义的函数
- mp3/rmvb转换
- Java Map排序
- 什么是区块链BaaS平台?
- win7添加打印机提示没有权限访问网络资源 网络不可用
- xmarks不能同步和访问之解决办法
- java中isa什么意思_aiisa是什么意思?
- matlab位移反分析公式,位移反分析.doc
- vue生成自定义样式二维码
热门文章
- 09-zookeeper
- 给力干货!一文教你如何通过Jade计算晶粒尺寸、微观应变和结晶度
- 直播回顾 | 中小型科技公司如何搞定金三银四
- 【论文阅读】AI20 A Dirichlet process biterm-based mixture model for short text stream clustering
- 树莓派PICO -oled详细避坑指导
- 人,为什么要活着,看淡生死不服就干
- 伙伴云戴志康:如何利用低代码提升研发和IT效能
- 10号发工资和20号发工资的公司,区别竟然这么大?
- css炫酷的倒计时,CSS3 实现倒计时效果
- Win10屏幕亮度无法调节解决折腾记录