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