微信小程序+Vant-自定义选择器组件(多选

实现效果

  • 无筛选,如有需要可参照单选组件中的方法
  • .json文件配置"component": true,
  • columns需要处理成含dictLabeldictValue字段,我是这样处理的:
css 复制代码
let list = arr.map(r => {
  return {
    ...r,
    dictValue: r.xxxId,
    dictLabel: r.xxxName
  }
})

实现代码

组件代码
html 复制代码
<van-popup show="{{ show }}" position="bottom" round custom-style="height:{{height}}%;z-index:2000;" class="relative">
  <view class="pd-30 flex mb-30 fixed pickerTop w100 bg-white">
    <view class="gray-3 fs14" bindtap="close">取消</view>
    <view class="pickerText bold">{{title}}</view>
    <view class="fs14" style="color: {{colorStyle}};" bindtap="getData1">确认</view>
  </view>
  <view class="mb-30 plr-30 mulPicker">
    <van-checkbox-group value="{{ valueList }}" bind:change="onChange">
      <van-cell-group>
        <van-cell wx:for="{{ columns }}" wx:key="index" value-class="value-class" clickable data-index="{{ index }}" bind:click="toggle">
          <van-checkbox catch:tap="noop" class="checkboxes-{{ index }}" shape="square" checked-color="{{colorStyle}}" name="{{ item.dictValue }}">
            {{item.dictLabel}}
          </van-checkbox>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
  </view>
</van-popup>
js 复制代码
import { formatTime, formatTime1 } from '../../../../utils/index'

Component({
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    show: Boolean,// 是否显示弹出层
    height: {
      type: Number,
      value: 80 // 默认80%,百分比0-100
    },
    title: {
      type: String,
      value: '请选择' 
    }, // 弹出层标题
    columns: Array, // 下拉选择的数据
    valueList: Array, // 选中回显
    colorStyle: {
      type: String,
      value: "#3772E9"
    },
  },
  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {
    getData1(e) {
      this.triggerEvent("getData1", this.data.valueList);
      this.close();
    },
    onChange(e) {
      this.setData({ valueList: e.detail, });
    },
    toggle(event) {
      const { index } = event.currentTarget.dataset;
      const checkbox = this.selectComponent(`.checkboxes-${index}`);
      checkbox.toggle();
    },
    noop() { },
    close() {
      this.triggerEvent("close");
    },
  },
})
css 复制代码
.pickerText {
  font-size: 16px;
}

.pickerTop {
  border-radius: 50rpx 50rpx 0 0;
  z-index: 2000;
}

.mulPicker {
  margin-top: 120rpx;
}

.value-class {
  flex: none !important;
}
页面使用
html 复制代码
<w-mulpicker show="{{show}}" columns="{{columns}}" title="{{title}}" bindgetData1="getData1" colorStyle="{{colorStyle}}" bindclose="close" />
js 复制代码
  getData1(e) {
    console.log(e.detail);
    this.close();
  },
  close() {
    this.setData({
      show: false,
    })
  },
相关推荐
stark张宇4 小时前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
菜鸟una6 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
2501_915106328 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者88 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
lypzcgf9 小时前
商城小程序数据库表结构文档
数据库·小程序·电商
2501_9159214310 小时前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
知识分享小能手10 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
Strawberry9610 小时前
chooseVideo传视频无法取到缩略图
微信小程序
一匹电信狗11 小时前
【C++】手搓AVL树
服务器·c++·算法·leetcode·小程序·stl·visual studio
2501_9160088911 小时前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview