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

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

效果图如下所示：

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: 10SjIjIbOPG0%;

}

.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 / http://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

});

}

})

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。