小程序?qū)崿F(xiàn)左滑刪除的效果的實(shí)例代碼
更新時(shí)間：2020年10月19日 11:24:04 作者：DOTNET的貓
這篇文章主要介紹了小程序?qū)崿F(xiàn)左滑刪除的效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
前言:實(shí)現(xiàn)小程序滑動(dòng)刪除有幾種方式,文章會(huì)簡(jiǎn)單列舉兩種實(shí)現(xiàn),先看效果。
一、使用movable-view實(shí)現(xiàn)滑動(dòng)
先看官方文檔
簡(jiǎn)單解讀一下movable-area標(biāo)簽的基本概念。movable-area標(biāo)簽就是定義了一個(gè)可移動(dòng)的視圖容器,支持在頁(yè)面中拖拽滑動(dòng),跟普通的view容器是一樣的,但是也有不同之處,movable-area必須設(shè)置width和height屬性,不設(shè)置默認(rèn)為10px;movable-view 默認(rèn)為絕對(duì)定位,top和left屬性為0px。
<movable-area> <movable-view out-of-bounds="true" direction="horizontal" inertia="true"> </movable-view> </movable-area>
我們需要用的一些屬性out-of-bounds,給他定義true,讓我們的容器超過(guò)可移動(dòng)區(qū)域后，movable-view還可以移動(dòng),direction屬性是定義我們滑動(dòng)的方向,vertical是垂直滑動(dòng),horizontal是水平滑動(dòng)。
二、使用Touch事件實(shí)現(xiàn)滑動(dòng)
1.bindtouchstart 函數(shù),手指觸摸動(dòng)作開始
2.bindtouchmove 函數(shù),手指觸摸后移動(dòng)
3.bindtouchend 函數(shù),手指觸摸動(dòng)作結(jié)束
實(shí)現(xiàn)思路:
1.頁(yè)面上的容器分為上下兩層,上面一層顯示正常加載無(wú)動(dòng)作的內(nèi)容,下面一層顯示容器觸發(fā)事件后展示的內(nèi)容,例如刪除、置頂、標(biāo)為未讀等按鈕。
2.每個(gè)容器上面那一層容器我們通過(guò)css使用定位來(lái)固定,通過(guò)操縱事件來(lái)實(shí)現(xiàn)向需要移動(dòng)的方向移動(dòng)。
3.通過(guò)官方文檔提供的API來(lái)實(shí)現(xiàn)容器隨著方向移動(dòng)。
完整代碼如下
1.wxml
<view class="">
<view class="containerTitle">使用movable-view實(shí)現(xiàn)左滑</view>
<view class="list">
<view class="product-item" wx:for="{{productList}}" wx:for-index="index" wx:key="{{item.id}}" >
<movable-area>
<movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}"
inertia="true"
data-productIndex="{{index}}"
bindtouchstart="handleTouchStart"
bindtouchend="handleTouchEnd"
bindchange="handleMovableChange">
<view class="product-item-wrap">
<view class="product-movable-item">
<view class="product-movable-item-name">{{item.name}}</view>
<view class="product-movable-item-code">{{item.code}}</view>
</view>
<view class="product-movable-item product-movable-item-amount">
<text class="amount">{{item.amount}}</text>
<text class="unit">萬(wàn)</text>
</view>
</view>
</movable-view>
</movable-area>
<view class="delete-btn" data-id="{{item.id}}" bindtap="handleDeleteProduct">刪除</view>
</view>
</view>
<view class="containerTitle">使用Touch事件實(shí)現(xiàn)左滑</view>
<view class="list">
<view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key="{{item.id}}">
<slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key="{{item.id}}">
<view class="product-item-wrap">
<view class="product-movable-item">
<view class="product-movable-item-name">{{item.name}}</view>
<view class="product-movable-item-code">{{item.code}}</view>
</view>
<view class="product-movable-item product-movable-item-amount">
<text class="amount">{{item.amount}}</text>
<text class="unit">萬(wàn)</text>
</view>
</view>
</slide-delete>
</view>
</view>
</view>
2.wxss
.containerTitle {
margin: 60rpx 0 30rpx;
font-size: 40rpx;
text-align: center;
font-weight: bold;
color: #383A3D;
}
.list .product-item {
position: relative;
width: 100vw;
border-bottom: 2rpx solid #E9E9E9;
box-sizing: border-box;
background: #fff;
z-index: 999;
}
.slide-product-list .slide-product-item {
position: relative;
width: 100vw;
border-bottom: 2rpx solid #E9E9E9;
box-sizing: border-box;
background: #fff;
z-index: 999;
}
.list .product-item movable-area {
height: 120rpx;
width: calc(100vw - 120rpx);
}
.list .product-item movable-view {
height: 120rpx;
width: 100vw;
background: #fff;
z-index: 999;
}
.list .product-item .delete-btn {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 120rpx;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #FFFFFF;
line-height: 120rpx;
z-index: 1;
background: red;
text-align: center;
}
.list .product-item-wrap {
position: relative;
display: flex;
align-items: center;
padding: 8rpx 0 20rpx 20rpx;
box-sizing: border-box;
}
.list .product-item-wrap .product-movable-item {
flex: 1;
overflow: hidden;
}
.list .product-item-wrap .product-movable-item-name {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #71747A;
line-height: 60rpx;
margin-right: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list .product-item-wrap .product-movable-item-code {
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #969AA3;
}
.list .product-item-wrap .product-movable-item-amount {
flex: 0 0 auto;
padding-right: 80rpx;
position: relative;
}
.list .product-item-wrap .product-movable-item-amount .amount {
width: 120rpx;
font-size: 28rpx;
color: #383A3D;
line-height: 60rpx;
}
.list .product-item-wrap .product-movable-item-amount .unit {
position: absolute;
top: 0;
right: 30rpx;
font-size: 28rpx;
color: #969AA3;
line-height: 60rpx;
}
3.js代碼
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
productList: [
{
id: 1,
name: '31省市區(qū)新增境外輸入13例',
code: 'Jin日頭條',
amount: 5
},
{
id: 2,
name: '飼養(yǎng)員遭熊攻擊身亡',
code: 'bai度新聞',
amount: 4
},
{
id: 3,
name: '安倍晉三參拜靖國(guó)神社',
code: '日媒',
amount: 10
}
],
slideProductList: [
{
id: 4,
name: '老兵回憶參加抗美援朝說(shuō)今生無(wú)悔',
code: 'xin微博',
amount: 101
},
{
id: 5,
name: '女子下樓時(shí)玩手機(jī)踩空摔傷',
code: 'zz資訊',
amount: 500
},
{
id: 6,
name: '楊紫為離線慶生',
code: 'xx新聞',
amount: 110
}
]
},
onLoad: function () {
},
/**
* 顯示刪除按鈕
*/
showDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex
this.setXmove(productIndex, -65)
},
/**
* 隱藏刪除按鈕
*/
hideDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex
this.setXmove(productIndex, 0)
},
/**
* 設(shè)置movable-view位移
*/
setXmove: function (productIndex, xmove) {
let productList = this.data.productList
productList[productIndex].xmove = xmove
this.setData({
productList: productList
})
},
/**
* 處理movable-view移動(dòng)事件
*/
handleMovableChange: function (e) {
if (e.detail.source === 'friction') {
if (e.detail.x < -30) {
this.showDeleteButton(e)
} else {
this.hideDeleteButton(e)
}
} else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
this.hideDeleteButton(e)
}
},
/**
* 處理touchstart事件
*/
handleTouchStart(e) {
this.startX = e.touches[0].pageX
},
/**
* 處理touchend事件
*/
handleTouchEnd(e) {
if(e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {
this.showDeleteButton(e)
} else if(e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {
this.showDeleteButton(e)
} else {
this.hideDeleteButton(e)
}
},
/**
* 刪除產(chǎn)品
*/
handleDeleteProduct: function ({ currentTarget: { dataset: { id } } }) {
let productList = this.data.productList
let productIndex = productList.findIndex(item => item.id === id)
productList.splice(productIndex, 1)
this.setData({
productList
})
if (productList[productIndex]) {
this.setXmove(productIndex, 0)
}
},
/**
* slide-delete 刪除產(chǎn)品
*/
handleSlideDelete({ detail: { id } }) {
let slideProductList = this.data.slideProductList
let productIndex = slideProductList.findIndex(item => item.id === id)
slideProductList.splice(productIndex, 1)
this.setData({
slideProductList
})
}
})
總結(jié)
到此這篇關(guān)于小程序?qū)崿F(xiàn)左滑刪除的效果的文章就介紹到這了,更多相關(guān)小程序左滑刪除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)櫥窗展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
全面解析Bootstrap中form、navbar的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中form、navbar的使用方法，感興趣的朋友可以參考一下2016-05-05
最近因?yàn)楣ぷ餍枰?，弄了好多天的js了，老婆一問(wèn)我在弄 ajax, 一問(wèn)我在弄js，她都聽得沒(méi)有一點(diǎn)興趣了，我自己感覺(jué)還好，畢竟做出來(lái)了東西就有成就感吧，這里把幾個(gè)有用但是不常見的東西貼出來(lái)供大家參考參考2009-02-02
JS中通過(guò)slice()&substring()截取字符串前幾位的方法
在Javascript使用字符串中,我們不一定需要全部的字符串,這時(shí)就需要截取字符串,本文主要介紹js中截取字符串前幾位的兩種方法：1、使用slice() 方法；2、使用substring() 方法,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-12-12
這篇文章主要介紹了JavaScript節(jié)流和防抖函數(shù)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-08-08
Javascript的并行運(yùn)算實(shí)現(xiàn)代碼
隨著多核cpu的普級(jí),并發(fā)/并行多線程運(yùn)算在主流的編程語(yǔ)言越來(lái)越流行,而在目前Javascript實(shí)現(xiàn)中還看不到在語(yǔ)言方面支持多線程,現(xiàn)在Javascript如此流行,真希望今后會(huì)在語(yǔ)言的層面有很大的變化.2010-11-11
JS 打印功能代碼可實(shí)現(xiàn)打印預(yù)覽、打印設(shè)置等
一個(gè)不錯(cuò)的JS 打印功能代碼,包括打印預(yù)覽、打印設(shè)置等,里面整合了很多知識(shí),是一個(gè)不錯(cuò)的學(xué)習(xí)案例2014-10-10
jQuery javascript獲得網(wǎng)頁(yè)的高度與寬度的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jQuery javascript獲得網(wǎng)頁(yè)的高度與寬度的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
JavaScript學(xué)習(xí)筆記之?dāng)?shù)組求和方法
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之?dāng)?shù)組求和方法的相關(guān)資料,需要的朋友可以參考下2016-03-03
原生javascript如何實(shí)現(xiàn)共享onload事件
這篇文章主要介紹了原生javascript如何實(shí)現(xiàn)共享onload事件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07