前言

移動端的下拉多選組件找了半個世紀(jì)也沒見著，當(dāng)我正準(zhǔn)備著手自己寫一個時，發(fā)現(xiàn)了dcloud插件市場的hqs-popup這一款彈窗插件。當(dāng)然，該插件的界面簡介舒服，也是為什么會選擇它的一個重要原因。

簡介

基于uni-popup實現(xiàn)，增加了手勢滑動關(guān)閉彈窗功能，體驗和抖音評論下滑關(guān)閉類似。功能如下：

• 可手動調(diào)整彈窗大小，并滑動關(guān)閉彈窗。也可關(guān)閉手動操作
• 可根據(jù)自己實際需要調(diào)整彈出方向
• 根據(jù)自己需要可自己設(shè)置點擊遮罩層是否關(guān)閉彈窗

?使用方法

1、點擊進(jìn)入官方插件市場點擊導(dǎo)入插件。

2、頁面

<!-- 崗位 --> <list-cell label="崗位" :showBorder="true" :required="true"><list-cell-right style="padding-left: 350rpx;" :label="item1.job_name" @rightClick="showPopupFrom('bottom', 'job')"></list-cell-right> </list-cell><hqs-popup v-model="showPopJob" title="選擇崗位" :from="popFromJob" :mask-click="maskClick" @sure="onSureJob()"><view><view :class="{checked: item.checked}" class="list-item" v-for="(item, i) in allJobList" :key="i"@click="selectFun(item, i)"><text>{{ item.name }}</text></view></view> </hqs-popup>

3、js方法

// 點擊確定選擇 崗位 onSureJob() {console.log('點擊確定選擇崗位');// 做數(shù)據(jù)處理let nameString = []let ids = this.allJobList.filter((val)=>{if(val.checked){nameString.push(val.name)return val}})this.$forceUpdate() }, // 點擊打開多選彈窗 showPopupFrom(from, ele) {this.popFromJob = fromthis.showPopJob = true }, // 角色選中 selectFun(item, index) {item.checked = !item.checked }

4、data數(shù)據(jù)定義

data(){return {showPopJob: false,popFromJob: 'bottom',// 設(shè)置點擊遮罩層可關(guān)閉maskClick: true，// 模擬列表數(shù)據(jù)allJobList: [{id：1，name: "工人"},{id：2，name: "農(nóng)民"},{id：3，name: "老板"},{id：4，name: "法人"},{id：5，name: "搬磚"},],} }

5、點擊選中時的背景

.checked {background-color: #ececec; }

最終實現(xiàn)效果

如想獲取完美視覺體驗，請點擊下方視屏鏈接查看最終演示效果

https://live.csdn.net/v/288504?spm=1001.2014.3001.5501

注： 本文展示最后展示的效果圖，在使用時有部分修改和調(diào)整，如有需要可私信本文作者（備注來源）

總結(jié)

以上是生活随笔為你收集整理的hqs-popup弹窗实现多选（uni-app）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。