小程序?qū)崿F(xiàn)左滑刪除的效果的實(shí)例代碼
前言:實(shí)現(xiàn)小程序滑動(dòng)刪除有幾種方式,文章會(huì)簡單列舉兩種實(shí)現(xiàn),先看效果。
一、使用movable-view實(shí)現(xiàn)滑動(dòng)
先看官方文檔
簡單解讀一下movable-area
標(biāo)簽的基本概念。movable-area
標(biāo)簽就是定義了一個(gè)可移動(dòng)的視圖容器,支持在頁面中拖拽滑動(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
,讓我們的容器超過可移動(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.頁面上的容器分為上下兩層,上面一層顯示正常加載無動(dòng)作的內(nèi)容,下面一層顯示容器觸發(fā)事件后展示的內(nèi)容,例如刪除、置頂、標(biāo)為未讀等按鈕。
2.每個(gè)容器上面那一層容器我們通過css使用定位來固定,通過操縱事件來實(shí)現(xiàn)向需要移動(dòng)的方向移動(dòng)。
3.通過官方文檔提供的API來實(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">萬</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">萬</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: '安倍晉三參拜靖國神社', code: '日媒', amount: 10 } ], slideProductList: [ { id: 4, name: '老兵回憶參加抗美援朝說今生無悔', 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)文章
全面解析Bootstrap中form、navbar的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中form、navbar的使用方法,感興趣的朋友可以參考一下2016-05-05JS中通過slice()&substring()截取字符串前幾位的方法
在Javascript使用字符串中,我們不一定需要全部的字符串,這時(shí)就需要截取字符串,本文主要介紹js中截取字符串前幾位的兩種方法:1、使用slice() 方法;2、使用substring() 方法,本文通過示例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-12-12Javascript的并行運(yùn)算實(shí)現(xiàn)代碼
隨著多核cpu的普級(jí),并發(fā)/并行多線程運(yùn)算在主流的編程語言越來越流行,而在目前Javascript實(shí)現(xiàn)中還看不到在語言方面支持多線程,現(xiàn)在Javascript如此流行,真希望今后會(huì)在語言的層面有很大的變化.2010-11-11JS 打印功能代碼可實(shí)現(xiàn)打印預(yù)覽、打印設(shè)置等
一個(gè)不錯(cuò)的JS 打印功能代碼,包括打印預(yù)覽、打印設(shè)置等,里面整合了很多知識(shí),是一個(gè)不錯(cuò)的學(xué)習(xí)案例2014-10-10jQuery javascript獲得網(wǎng)頁的高度與寬度的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query javascript獲得網(wǎng)頁的高度與寬度的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04JavaScript學(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事件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07