微信小程序+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,
    })
  },
相关推荐
mg6684 分钟前
微信小程序入门实例_____从零搭建你的第一个微信小程序
微信小程序·小程序
皮皮灬虾1 小时前
微信小程序下单页—地址列表页—新增地址页 页面交互
微信小程序·小程序·交互
源码_V_saaskw9 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
说私域9 天前
云零售新中枢:定制化“开源AI智能名片+S2B2C商城小程序”驱动的沉浸式触点进化论
人工智能·小程序·开源·零售
伍哥的传说9 天前
React 轻量级状态管理器Zustand
前端·javascript·react.js·小程序·前端框架·ecmascript
好好的哦10 天前
抖音小程序支付错误码141211
小程序·uni-app
橘子海全栈攻城狮10 天前
【源码+文档+调试讲解】基于web的运动健康小程序的设计与实现y196
java·开发语言·小程序·notepad++
即可皕10 天前
WebSocket长连接在小程序中的实践:消息推送与断线重连机制设计
websocket·网络协议·小程序
Haibakeji10 天前
海拔案例分享-门店业绩管理小程序
大数据·小程序
鱼雀AIGC10 天前
如何仅用AI开发完整的小程序<3>—创建小程序基础框架
小程序·aigc·ai编程