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

devtools/2024/11/23 22:36:09/

实现效果

  • 筛选是filter,搜索框如有显隐需要,需自行添加配置显隐参数
  • 弹出层高度样式需要手动修改,需自行添加配置高度参数
  • .json文件配置"component": true,
    在这里插入图片描述

实现代码

组件代码
<van-popup show="{{ show }}" position="bottom" round custom-style="height:100%;z-index:2000;" class="relative"><view class="pd-30 mb-30 fixed pickerTop w100 bg-white"><view class="flex"><view class="gray-3 fs14" bindtap="close">取消</view><view class="pickerText bold">{{title}}</view><view class="fs14" style="color: {{colorStyle}};" bindtap="getData">确认</view></view><view class="pd-20 mt-40 bg border radius-10 flex_l"><image src="../../../assets/img/search1.png" style="width: 40rpx;height: 40rpx;" mode="" class="mr-20" /><input bindinput="getSearch" placeholder="请输入"></input></view></view><view class="plr-30 mulPicker"><van-checkbox-group value="{{ value }}" bind:change="onChange"><van-cell-group><van-cell wx:for="{{ dataList }}" wx:key="index" value-class="value-class" clickable data-index="{{ index }}" bind:click="toggle"><van-checkbox catch:tap="noop" class="checkboxes-{{ index }}" checked-color="{{colorStyle}}" name="{{ item.dictValue * 1 }}">{{item.dictLabel}}</van-checkbox></van-cell></van-cell-group></van-checkbox-group></view>
</van-popup>
// pages/menu/components/pickDateTime.js
Component({options: {addGlobalClass: true, // 可允许外部修改样式},/*** 组件的属性列表*/properties: {show: Boolean,// 是否显示弹出层title: String, // 弹出层标题columns: {type: Array,value: [],observer: function () {this.handleData();}}, // 选择的数据value: Array,  // 选中的值colorStyle: {type: String,value: "#3772E9"},flag: String, // 1-服务对象 2-位置},/*** 组件的初始数据*/data: {selectItem: null,dataList: [],},/*** 组件的方法列表*/methods: {handleData() {this.setData({dataList: this.data.columns})},getData() {this.triggerEvent("getData", this.data.selectItem);this.close();},onChange(e) {console.log(e.detail);let itemlet listif (e.detail.length > 0) {if (e.detail.length > 1) {list = e.detail.splice(1, 1)} else {list = e.detail}item = this.properties.columns.find(r => r.dictValue == list[0])} else {item = nulllist = []}this.setData({ value: list, selectItem: item });},close() {console.log("pick");this.triggerEvent("close");},toggle(event) {const { index } = event.currentTarget.dataset;const checkbox = this.selectComponent(`.checkboxes-${index}`);checkbox.toggle();},noop() { },getSearch(event) {let { value, cursor, keyCode } = event.detail//keyCode 为键值,处理函数可以直接 return 一个字符串,将替换输入框的内容。/* wx.http('yourHttpUrl', {name: value}, 'post').then(data => {console.log('getSearch');let list = data.map(r => {return {...r,dictValue: r.olderId,dictLabel: r.olderName}})this.setData({columns: list})}) */let list = this.data.columns.filter(item => item.nodeName?.includes(value))this.setData({dataList: value ? list : this.data.columns})}},
})
/* pages/menu/components/pickDateTime.wxss */
.pickerText {font-size: 16px;
}.pickerTop {border-radius: 50rpx 50rpx 0 0;z-index: 2000;
}.mulPicker {margin-top: 240rpx;
}.value-class {flex: none !important;
}

http://www.ppmy.cn/devtools/136394.html

相关文章

NVR接入录像回放平台EasyCVR视频融合平台加油站监控应用场景与实际功能

在现代社会中&#xff0c;加油站作为重要的能源供应点&#xff0c;面临着安全监管与风险管理的双重挑战。为应对这些问题&#xff0c;安防监控平台EasyCVR推出了一套全面的加油站监控方案。该方案结合了智能分析网关V4的先进识别技术和EasyCVR视频监控平台的强大监控功能&#…

【OpenCV】Could NOT find TIFF (missing: TIFF_LIBRARY TIFF_INCLUDE_DIR)

Could NOT find TIFF (missing: TIFF_LIBRARY TIFF_INCLUDE_DIR) 目录 Could NOT find TIFF (missing: TIFF_LIBRARY TIFF_INCLUDE_DIR)1. **安装TIFF库**&#xff1a;2. **确认安装位置**&#xff1a;3. **配置项目**&#xff1a;4. **重新运行CMake**&#xff1a;5. **编译项…

Office-Tab-for-Mac Office 窗口标签化,Office 多文件标签化管理

Office Tab&#xff1a;让操作更高效&#xff0c;给微软 Office 添加多标签页功能 Office 可以说是大家装机必备的软件&#xff0c;无论学习还是工作都少不了。其中最强大、用的最多的&#xff0c;还是微软的 Microsoft Office。 遗憾的是&#xff0c;微软的 Office 不支持多…

14.C++STL1(STL简介)

⭐本篇重点&#xff1a;STL简介 ⭐本篇代码&#xff1a;c学习/7.STL简介/07.STL简介 橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) 目录 一. STL六大组件简介 二. STL常见算法的简易使用 2.1 swap ​2.2 sort 2.3 binary_search lower_bound up_bound 三…

C++:设计模式-单例模式

单例模式&#xff08;Singleton Pattern&#xff09;是一种设计模式&#xff0c;确保一个类只有一个实例&#xff0c;并且提供全局访问点。实现单例模式的关键是防止类被多次实例化&#xff0c;且能够保证实例的唯一性。常见的实现手法包括懒汉式、饿汉式、线程安全的懒汉式等。…

DrissionPage爬虫工具教程

当然可以&#xff01;下面是一些更高级和复杂的 DrissionPage 使用示例&#xff0c;包括处理动态加载的内容、处理登录和会话、处理多页面操作等。 处理动态加载的内容 许多现代网站使用 JavaScript 动态加载内容。在这种情况下&#xff0c;我们需要等待特定的元素出现&#…

大三学生实习面试经历(1)

最近听了一位学长的建议&#xff0c;不能等一切都准备好再去开始&#xff0c;于是就开始了简历投递&#xff0c;恰好简历过了某小厂的初筛&#xff0c;开启了线上面试&#xff0c;记录了一些问题&#xff1a; &#xff08;通过面试也确实了解到了自己在某些方面确实做的还不够…

40分钟学 Go 语言高并发:Goroutine基础与原理

Day 03 - goroutine基础与原理 1. goroutine创建和调度 1.1 goroutine基本特性 特性说明轻量级初始栈大小仅2KB&#xff0c;可动态增长调度方式协作式调度&#xff0c;由Go运行时管理创建成本创建成本很低&#xff0c;可同时运行数十万个通信方式通过channel进行通信&#x…