這篇文章主要為大家展示了微信小程序如何實(shí)現(xiàn)滑動(dòng),內(nèi)容簡而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會(huì)有收獲的,下面讓小編帶大家一起來看看吧。
目前創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、紅塔網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
前言
本文使用動(dòng)畫組件wx.createAnimation來實(shí)現(xiàn)滑動(dòng)操作:
1. 左滑動(dòng)顯示操作項(xiàng)區(qū)域;
2. 點(diǎn)擊操作項(xiàng)觸發(fā)相應(yīng)方法;
3. 右滑動(dòng)和點(diǎn)擊行收起操作項(xiàng);
4. 點(diǎn)擊“刪除”并確定則刪除該條數(shù)據(jù)。
最終效果如下:
實(shí)現(xiàn)過程
1. 文件index.wxml和index.wxss代碼如下,這一塊比較簡單,可自行查看,不做過多分析;
Tips:“詳情”、“取號”和“刪除”點(diǎn)擊觸發(fā)使用catchtap,阻止冒泡事件向上冒泡;
<view class="wrapper"> <view class="container"> <view class="list"> <view class="line" bindtouchstart="touchstartX" bindtap="resetX" bindtouchmove="touchmoveX" bindtouchend="touchendX" animation="{{currentIndex === index ?animation : ''}}" data-index="{{index}}" wx:for="{{recordList}}" wx:key="id"> <image class="icon-title" src="../../images/start_icon.png"></image> <view class="mes"> <view class="title">{{item.title}}</view> <view class="date">預(yù)約時(shí)間:{{item.date}}</view> <view class="status">狀態(tài):<text>{{item.status}}</text></view> </view> <view class="operation"> <view class="detail" catchtap="openDetail">詳情</view> <view class="number" catchtap="getNumber">取號</view> <view class="delete" catchtap="deleteItem">刪除</view> </view> </view> </view> </view> </view>
.container .line { display: flex; padding: 20rpx 30rpx; border-bottom: 2rpx solid #ebebeb; position: relative; cursor: pointer; } .container .line .icon-title { margin-top: 28rpx; width: 30rpx; height: 30rpx; } .container .line .mes { flex: 1; margin-left: 10rpx; } .container .line .mes .date, .container .line .mes .status { color: #9d9d9d; font-size: 24rpx; margin-top: 4rpx; } .status text { color: #fba500; } .operation { position: absolute; top: 0; right: -300rpx; height: 152rpx; text-align: center; color: #fff; line-height: 152rpx; display: flex; } .operation view { width: 100rpx; } .operation .detail { background-color: #018efb; } .operation .number { background-color: #fba500; } .operation .delete { background-color: #cfcfcf; }
2. 文件index.js存放所有功能的邏輯代碼,下面主要分析幾個(gè)重點(diǎn)方法:
1)方法touchmoveX用于手指觸摸后移動(dòng)時(shí)獲取移動(dòng)距離,并根據(jù)移動(dòng)距離動(dòng)畫顯示操作項(xiàng)相應(yīng)區(qū)域,使移動(dòng)有即時(shí)效果;
2)方法touchendX用于手指觸摸動(dòng)作結(jié)束時(shí),如果移動(dòng)距離達(dá)到100,則動(dòng)畫顯示全部操作項(xiàng)區(qū)域;如果移動(dòng)距離未達(dá)到100,則收起操作項(xiàng)區(qū)域;
3)方法deleteItem用于刪除該條數(shù)據(jù)。
let movedistance = 0; Page({ data: { currentIndex: 0, // 列表操作項(xiàng)的index recordList: [{ // 列表數(shù)據(jù) id: 1, title: '業(yè)務(wù)辦理01', date: '2020-04-21 10:30-12:00', status: '未取號' }, { id: 2, title: '業(yè)務(wù)辦理02', date: '2020-04-21 10:30-12:00', status: '未取號' }, { id: 3, title: '業(yè)務(wù)辦理03', date: '2020-04-21 10:30-12:00', status: '取號' }] }, // 打開詳情頁 openDetail() { console.log(this.data.currentIndex, '點(diǎn)擊詳情'); }, // 取號 getNumber() { console.log(this.data.currentIndex, '點(diǎn)擊取號'); }, // 刪除數(shù)據(jù) deleteItem() { let that = this; let recordList = this.data.recordList; wx.showModal({ title: '提示', content: '是否刪除該條數(shù)據(jù)?', success(res) { if (res.confirm) { that.slideAnimation(0, 500); recordList.splice(that.data.currentIndex, 1); that.setData({ recordList: recordList }); } else if (res.cancel) { console.log('用戶點(diǎn)擊取消') } } }); }, // 手指觸摸動(dòng)作開始 touchstartX(e) { this.setData({ currentIndex: e.currentTarget.dataset.index }); // 獲取觸摸X坐標(biāo) this.recordX = e.touches[0].clientX; }, // 點(diǎn)擊操作 resetX() { this.slideAnimation(0, 500); }, // 手指觸摸后移動(dòng) touchmoveX(e) { let currentX = e.touches[0].clientX; movedistance = currentX - this.recordX; // 獲取移動(dòng)距離 this.slideAnimation(movedistance, 500); }, // 手指觸摸動(dòng)作結(jié)束 touchendX() { let recordX; if (movedistance <= -100) { // 移動(dòng)達(dá)到距離就動(dòng)畫顯示全部操作項(xiàng) recordX = -300; } else if (movedistance >= -100) { // 移動(dòng)未達(dá)到距離即還原 recordX = 0; } this.slideAnimation(recordX, 500); }, // 滑動(dòng)動(dòng)畫 slideAnimation(recordX, time) { let animation = wx.createAnimation({ duration: time, timingFunction: 'ease' }); animation.translate(recordX + 'rpx', 0).step() this.setData({ animation: animation.export() }) }, onLoad: function(options) { wx.setNavigationBarTitle({ title: '銀行業(yè)務(wù)', }); movedistance = 0; // 解決切換到其它頁面再返回該頁面動(dòng)畫失效的問題 } })
以上就是關(guān)于微信小程序如何實(shí)現(xiàn)滑動(dòng)的內(nèi)容,如果你們有學(xué)習(xí)到知識或者技能,可以把它分享出去讓更多的人看到。
分享文章:微信小程序如何實(shí)現(xiàn)滑動(dòng)
本文鏈接:http://www.muchs.cn/article46/ijsjeg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、營銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、搜索引擎優(yōu)化、定制網(wǎng)站、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)