实现代码及解析

使用到的组件有：

  1. uni-popup（弹窗组件）
  2. scroll-view（滑动视图组件）
  3. uni-list（列表组件，包含内置的列表样式）
  4. checkbox-group（复选框集合组件，记录多个复选框的值成一个数组）
  5. checkbox（搭配checkbox-group组件使用，提供复选框样式，绑定value属性可以将选中的参数传递到checkbox-group的@change事件中）
  6. label（不用多说，复选框必备 增加用户点击体验） ```vue 
  1. <a name="VPQtv"></a>
  2. ### 实现效果
  3. 点击左上角菜单按钮，调用popup组件的open方法弹出选项菜单。<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/2494810/1638163798800-404eede2-92fc-4251-9db1-41df2ca97984.png#clientId=u1686e4cd-a7e8-4&from=paste&height=575&id=ua0844d9b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=766&originWidth=470&originalType=binary&ratio=1&size=141509&status=done&style=none&taskId=ua4eb08f6-1fcf-4b48-98c2-b9df057515a&width=353)<br />实现遮罩弹窗菜单<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/2494810/1638163787948-0f55d63c-8ffd-4cd9-9659-3a2dd99a1304.png#clientId=u1686e4cd-a7e8-4&from=paste&height=596&id=u9596c747&margin=%5Bobject%20Object%5D&name=image.png&originHeight=795&originWidth=475&originalType=binary&ratio=1&size=96483&status=done&style=none&taskId=ua9c96a30-a652-4af0-8211-f82cf8441b5&width=356)![image.png](https://cdn.nlark.com/yuque/0/2021/png/2494810/1638163808733-f7acdbd0-3069-478e-a847-e42a0b213225.png#clientId=u1686e4cd-a7e8-4&from=paste&id=u173e0b7a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=113&originWidth=205&originalType=binary&ratio=1&size=3686&status=done&style=none&taskId=uefd9aa36-d8ab-4a40-a0de-5fe3eb40a63)
  4. <a name="hJ5eu"></a>
  5. ### 如果需要与数据库交互
  6. 可以修改methods中的typeChange() 方法，在其中修改数据库的查询字段where的值，实时修改查询到的数据。<br />并通过dbCmd来调用对于数组数据的查询方法。
  7. <a name="aeZ9E"></a>
  8. #### 完整代码：
  9. ```vue
  10. <template>
  11. <!--与导航栏交互，点击导航栏中的按钮，触发弹窗事件open，在open中调用popup组件的弹窗方法，弹出选项列表-->
  12.  <uni-nav-bar  leftIcon="list" fixed="true" @clickLeft="open"></uni-nav-bar>
  14.  <unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
  15.                 :where="where" collection="movie" :page-size="10" 
  16.                 field="imgSrc,title,info,score,order,quote,_id">
  18.    <!--各种展示数据库查询内容的代码...-->
  19.    <view v-for="(item,index) in data">
  20.      {{item.title}}
  21.    </view>
  22.    <!--...-->
  24. <!-- 左侧弹出菜单栏 -->
  25.         <!-- 1.首先使用uPopup组件创建弹出菜单样式 -->
  26.         <uni-popup ref="popup" :safeArea="true">
  27.             <view>
  28.                 <!-- 2.利用scroll-view组件创建可以上下滑动的选项样式，注意上下滑动的scorll-view必须通过css设置高度height -->
  29.                 <scroll-view scroll-y="true" class="scroll-Y">
  30.                     <!-- 3.利用uni-list组件提供列表的样式(注：这里uni-list只起到提供列表样式的作用 ) -->
  31.                         <uni-list>
  32.                             <!-- 4.利用checkbox-group组件创建复选框集合 选中的数据作为一个数组 并调用change事件获取将选中的值传入方法中 -->
  33.                             <checkbox-group name="typelist" @change="typeChange">
  34.                                 <!-- 5.利用v-for从data中读出电影类型的数组并创建同样数量的view块,通过type类设置view块中的样式 -->
  35.                             <view v-for="(item,index) in movieType" class="type" :key="index">
  36.                                 <!-- 6.利用checkbox组件创建复选框，并把值保定在value上，这样在触发group的change事件时会自动将value传入函数 -->
  37.                                 <label>                    
  38.                                         <text style="padding-right: 3px;">{{item}}</text><checkbox :value="item"/>        
  39.                                 </label>
  40.                             </view>
  41.                             </checkbox-group>
  42.                         </uni-list>
  43.                  </scroll-view>
  44.             </view>
  45.         </uni-popup>
  46.   </unicloud-db>
  47. </template>
  49. <script>
  50.   export default {
  51.     data(){
  52.       return {
  53.         where: '',
  54.                 movieType: ['剧情','喜剧','动作','爱情','科幻','动画','悬疑','惊悚','恐怖','犯罪','同性','音乐','歌舞','传记','历史','战争','西部','奇幻','冒险','灾难','武侠','情色']
  55.       }
  56.     },
  57.     methods: {
  58.             async typeChange(e){
  59.                 const db = uniCloud.database();
  60.                 const dbCmd = db.command
  62.                 //利用数据库指令中的 all()方法 可以判断字段是否同时包含一个给定数组的所有元素，这个方法可以实现复选选择的功能
  63.                 this.where = {
  64.                     type: dbCmd.all(e.detail.value)
  65.                 }
  66.             },
  67.       open(){
  68.                 //通过组件定义的ref调用uni-popup方法，如果传入参数，type属性将失效，仅支持 ['top','left','bottom','right','center']
  69.               this.$refs.popup.open('left')
  70.             },
  71.      },
  72.   }
  73. </script>
  75. <style>
  76.       .scroll-Y {
  77.         padding-top: 51%;
  78.         height: 516px;
  79.     }
  81.     .type {
  82.         margin: 13px;
  83.         text-align: center;
  84.     }
  85. </style>

实现效果：
页面上的数据根据选中的选项实时地改变。
image.png