前言

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

簡(jiǎn)介

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

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

?使用方法

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

2、頁(yè)面

<!-- 崗位 --> <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方法

// 點(diǎn)擊確定選擇 崗位 onSureJob() {console.log('點(diǎn)擊確定選擇崗位');// 做數(shù)據(jù)處理let nameString = []let ids = this.allJobList.filter((val)=>{if(val.checked){nameString.push(val.name)return val}})this.$forceUpdate() }, // 點(diǎn)擊打開多選彈窗 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è)置點(diǎn)擊遮罩層可關(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、點(diǎn)擊選中時(shí)的背景

.checked {background-color: #ececec; }

最終實(shí)現(xiàn)效果

如想獲取完美視覺體驗(yàn)，請(qǐng)點(diǎn)擊下方視屏鏈接查看最終演示效果

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

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

總結(jié)

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

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