php 小程序运动步数_微信小程序实现运动步数排行功能（可删除）

刺骨的言语ヽ痛彻心扉 2022-12-31 15:19 88阅读 0赞

效果图如下所示：

![Image 1][]

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;

// 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",

pace: "23456",

\},

rank: "2",

txtStyle: "",

icon: "/images/my.png",

pace: "23450",

\},

rank: "3",

txtStyle: "",

icon: "/images/my.png",

pace: "22345",

\},

rank: "4",

txtStyle: "",

icon: "/images/my.png",

pace: "21687",

\},

rank: "5",

txtStyle: "",

icon: "/images/my.png",

pace: "21680",

\},

rank: "6",

txtStyle: "",

icon: "/images/my.png",

pace: "20890",

\},

rank: "7",

txtStyle: "",

icon: "/images/my.png",

pace: "20741",

\},

rank: "8",

txtStyle: "",

icon: "/images/my.png",

pace: "19511",

\},

rank: "9",

txtStyle: "",

icon: "/images/my.png",

pace: "19501",

\},\]

this.setData(\{

list: list

\});

\})

总结

以上所述是小编给大家介绍的微信小程序实现运动步数排行功能(可删除)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

[Image 1]:

php 小程序运动步数_微信小程序实现运动步数排行功能（可删除）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【微信小程序】小程序功能开发

相关小程序获取微信运动步数并集成echarts报表显示

相关微信小程序 - 实现左滑动删除功能

相关 php 小程序运动步数_微信小程序实现运动步数排行功能（可删除）

相关用 Python 修改微信（支付宝）运动步数，轻松 TOP1

相关微信小程序通过小程序云实现微信支付功能

相关微信小程序——单步调试+变量查看

相关微信小程序中获取用户微信运动信息

相关微信小程序模板消息实现（PHP+小程序）

相关微信小程序 - 实现左滑动删除功能