微信小程序 實現(xiàn)列表項滑動顯示刪除按鈕的功能
更新時間：2017年04月13日 16:13:23 投稿：lqh
這篇文章主要介紹了微信小程序列表項滑動顯示刪除按鈕的相關資料,需要的朋友可以參考下
微信小程序 實現(xiàn)列表項滑動顯示刪除按鈕的功能
微信小程序并沒有提供列表控件，所以也沒有iOS上慣用的列表項左滑刪除的功能，SO只能自己干了。
原理很簡單，用2個層，上面的層顯示正常的內(nèi)容，下面的層顯示一個刪除按鈕，就是記錄手指滑動的距離，動態(tài)的來移動上層元素，當然上層用絕對定位。
wxml：
<view class="container">
<view class="record-box" data-datetime="{{record.datetime}}" wx:for="{{detailList}}" wx:for-item="record">
<view class="record" style="left:{{record.offsetX}}px" bindtouchstart="recordStart" catchtouchmove="recordMove" bindtouchend="recordEnd">
<view class="left">
<view>{{record.type}} {{record.count+record.unit}}</view>
<view class="summary">{{record.remark}}</view>
</view>
<view class="right">
{{record.datetime}}
</view>
</view>
<view class="delete-box">
<view>刪除</view>
</view>
</view>
</view>
wxss：
@import "../common/weui.wxss";
.container {
box-sizing: border-box;
padding: 0 0 0 0;
}
.record {
display: flex;
flex-direction: row;
align-items: center;
width:100%;
height: 120rpx;
position: absolute;
justify-content: space-between;
background-color: #fff;
}
.record .right{
margin-right: 30rpx;
color: #888888;
}
.record .left{
margin-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.record .left .summary{
color: #aaa;
font-size: 30rpx;
line-height: 30rpx;
}
.record-box{
height: 120rpx;
width: 100%;
border-bottom: 1rpx solid #ddd;
background-color: #fff;
}
.delete-box{
background-color: #e64340;
color: #ffffff;
float: right;
height: 100%;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.record-box:last-child {
border-bottom: 0;
}
.record .r-item {
}
JS代碼：
var detailList = [
{ datetime: '2017-01-01 17:00', count: 100, unit: 'ml', type: '開水', remark: '哈哈哈哈' },
{ datetime: '2017-01-01 17:01', count: 100, unit: 'ml', type: '開水' },
{ datetime: '2017-01-01 17:02', count: 100, unit: 'ml', type: '開水' }
];
var recordStartX = 0;
var currentOffsetX = 0;
Page(
{
data: {
detailList: detailList
}
,
recordStart: function (e) {
recordStartX = e.touches[0].clientX;
currentOffsetX = this.data.detailList[0].offsetX;
console.log('start x ', recordStartX);
}
,
recordMove: function (e) {
var detailList = this.data.detailList;
var item = detailList[0];
var x = e.touches[0].clientX;
var mx = recordStartX - x;
console.log('move x ', mx);
var result = currentOffsetX - mx;
if (result >= -80 && result <= 0) {
item.offsetX = result;
}
this.setData({
detailList: detailList
});
}
,
recordEnd: function (e) {
var detailList = this.data.detailList;
var item = detailList[0];
console.log('end x ', item.offsetX);
if (item.offsetX < -40) {
item.offsetX = -80;
} else {
item.offsetX = 0;
}
this.setData({
detailList: detailList
});
}
}
);
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
本文將詳細介紹JS編程風格的幾個要點與JS代碼優(yōu)化的幾點建議,需要的朋友可以參考下2020-02-02
如果文字過長,則將過長的部分變成省略號顯示...2006-06-06
這篇文章主要介紹了微信小程序 setData使用方法及常用錯誤解決辦法的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 input表單與redio及下拉列表的使用實例的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了使用純JavaScript封裝一個消息提示條功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
fs-extra實現(xiàn)yarn?create?tlist創(chuàng)建示例詳解
這篇文章主要為大家介紹了fs-extra實現(xiàn)yarn?create?tlist創(chuàng)建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
JavaScript立即執(zhí)行函數(shù)用法解析
這篇文章主要介紹了JavaScript立即執(zhí)行函數(shù),我們知道，在一般情況下，函數(shù)必須先調(diào)用才能執(zhí)行，如下所示，我們定義了一個函數(shù)，并且調(diào)用,下面一起進入文章來接具體的使用方法吧2021-12-12
這篇文章主要介紹了JavaScript 原型與原型鏈，JavaScript常被描述為一種基于原型的語言，對象以其原型為模板、從原型繼承屬性和放法。原型對象也可能擁有原型，并從中繼承屬性和方法，一層一層以此類推。這種關系常被稱為原型鏈，帶著簡單的了解看看下文內(nèi)容具體介紹吧2021-10-10
這篇文章主要介紹了微信小程序 快捷鍵整理的相關資料,這里整理了不少項目中經(jīng)常用到的快捷鍵，需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了JavaScript集成公式編輯器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08