uniapp uni-swipe-action 滑動(dòng)操作狀態(tài)恢復(fù)功能實(shí)現(xiàn)
按照uni-app官方文檔的寫(xiě)法 當(dāng)前一條滑動(dòng)確認(rèn)之后 頁(yè)面列表刷新 但是滑動(dòng)的狀態(tài)還在 入下圖所示:
我們需要在滑動(dòng)確認(rèn)之后 頁(yè)面刷新 滑動(dòng)狀態(tài)恢復(fù) 那么我們就來(lái)寫(xiě)一下這部分的邏輯:
首先,配置一下:show="isOpened[item.id]" @change="change(index)"
注意:isOpened一定要定位到你當(dāng)前點(diǎn)擊的內(nèi)容,我這里是用id區(qū)分的, 不然會(huì)出現(xiàn)所有列表都同步滑開(kāi)或者關(guān)閉
<view class="uni-swipe-box" v-for=" (item,index) in userList" :key="index"> <uni-swipe-action-item :threshold="0" :show="isOpened[item.id]" @change="change(index)" :auto-close='true' :right-options="options2" @click="bindClick($event,item)"> <view class="content-box"> <view class="user-name">姓名:<span class="span">{{item.userName}}</span></view> <view class="user-name">分組:<span class="span">{{item.groupName}}</span></view> </view> </uni-swipe-action-item> </view>
data() { return { isOpened: {}, tempOpened: null, // 臨時(shí)狀態(tài) } }, mounted() { // 初始化 userList 中每個(gè)item的 isOpened 狀態(tài) this.userList.forEach(item => { this.$set(this.isOpened, item.id, false); }); }, methods: { change(index) { // 使用tempOpened記錄當(dāng)前滑動(dòng)狀態(tài),而不是直接改變isOpened this.tempOpened = !this.isOpened[this.userList[index].id]; }, bindClick(e, item) { const that = this console.log(e); console.log('item', item); const id = item.id if (e.content.text === '通過(guò)') { uni.showModal({ title: '提交確認(rèn)', content: `確認(rèn)審核通過(guò)?`, success: (res) => { if (res.confirm) { that.isPass = true this.isOpened[item.id] = this.tempOpened; that.tempOpened = null; // 清理臨時(shí)狀態(tài) that.makeRequst(id) // 調(diào)用后臺(tái)接口 } else if (res.cancel) { that.isPass = false that.isOpened[item.id] = that.tempOpened; that.tempOpened = null; // 清理臨時(shí)狀態(tài) console.log('用戶取消操作'); } } }); } }
這樣就可以實(shí)現(xiàn)及時(shí)恢復(fù)滑動(dòng)狀態(tài)
官方文檔uni-app官網(wǎng)
到此這篇關(guān)于uni-app uni-swipe-action 滑動(dòng)操作狀態(tài)恢復(fù)的文章就介紹到這了,更多相關(guān)uni-app uni-swipe-action 滑動(dòng)操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js+canvas實(shí)現(xiàn)刮刮獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)刮刮獎(jiǎng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09理解JAVASCRIPT中hasOwnProperty()的作用
JavaScript中hasOwnProperty函數(shù)方法是返回一個(gè)布爾值,指出一個(gè)對(duì)象是否具有指定名稱的屬性2013-06-06JavaScript創(chuàng)建閉包的兩種方式的優(yōu)劣與區(qū)別分析
這篇文章主要介紹了JavaScript創(chuàng)建閉包的兩種方式的優(yōu)劣與區(qū)別分析的相關(guān)資料,需要的朋友可以參考下2015-06-06取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法
今天小編就為大家分享一篇取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08JS實(shí)現(xiàn)仿新浪黃色經(jīng)典滑動(dòng)門(mén)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿新浪黃色經(jīng)典滑動(dòng)門(mén)效果代碼,是一款非常簡(jiǎn)單的經(jīng)典鼠標(biāo)響應(yīng)滑動(dòng)切換效果,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的技巧,需要的朋友可以參考下2015-09-09JS實(shí)現(xiàn)拖拽元素時(shí)與另一元素碰撞檢測(cè)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖拽元素時(shí)與另一元素碰撞檢測(cè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08