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

ops/2024/11/24 11:24:00/

实现效果

  • 筛选是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/ops/136292.html

相关文章

网络爬虫——常见问题与调试技巧

在开发网络爬虫的过程中&#xff0c;开发者常常会遇到各种问题&#xff0c;例如网页加载失败、数据提取错误、反爬机制限制等。以下内容将结合实际经验和技术方案&#xff0c;详细介绍解决常见错误的方法&#xff0c;以及如何高效调试和优化爬虫代码。 1. 爬虫过程中常见的错误…

科研深度学习:如何精选GPU以优化服务器性能

GPU在科研深度学习中的核心价值 在科研深度学习的范畴内&#xff0c;模型训练是核心环节。面对大规模参数的模型训练&#xff0c;这往往是科研过程中最具挑战性的部分。传统CPU的计算模式在处理复杂模型时&#xff0c;训练时间会随着模型复杂度的增加而急剧增长&#xff0c;这…

Docker Compose部署 Zabbix 6.0【笔记】

官方镜像指导 以下仓库在 Docker Hub 中可用: 组件Docker 仓库Zabbix agentzabbix/zabbix-agentZabbix server支持 MySQLzabbix/zabbix-server-mysql支持 PostgreSQLzabbix/zabbix-server-pgsqlZabbix Web 界面基于 Apache2 Web 服务器,支持 MySQLzabbix/zabbix-web-apache-…

ssm基于bs的企业合同管理系统

摘要 企业合同管理系统是一种旨在帮助企业高效管理各类合同的软件工具。该系统能够实现合同的电子化存储、快速检索和版本控制&#xff0c;简化审批流程。通过这一系统&#xff0c;企业能够确保合同执行的合规性&#xff0c;降低法律风险&#xff0c;同时提升工作效率和管理水…

09 —— Webpack搭建开发环境

搭建开发环境 —— 使用webpack-dev-server 启动Web服务&#xff0c;自动检测代码变化&#xff0c;有变化后会自动重新打包&#xff0c;热更新到网页&#xff08;代码变化后&#xff0c;直接替换变化的代码&#xff0c;自动更新网页&#xff0c;不用手动刷新网页&#xff09; …

Excel如何批量导入图片

这篇文章将介绍在Excel中如何根据某列数据&#xff0c;批量的导入与之匹配的图片。 准备工作 如图&#xff0c;我们准备了一张员工信息表以及几张员工的照片 可以看到&#xff0c;照片名称是每个人的名字&#xff0c;与Excel表中的B列&#xff08;姓名&#xff09;对应 的卢易…

【Seed-Labs 2.0】Local DNS Attack Lab

说在前面 本实验属为Seed-Labs 的DNS LAB 中的第一个实验&#xff0c;也是最简单的实验&#xff0c;该系列一共有五个实验: Local DNS Attack LabThe Kaminsky Attack LabDNS Rebinding Attack LabDNS Infrastructure LabDNSSEC Lab 本实验假设攻击者和DNS服务器在同一个局域…

打造极致网页体验:HTML与CSS高级实战秘籍

文章目录 CSS Grid布局高级技巧1. 隐式与显式轨道2. 自动填充与重复3. 命名区域 CSS Flexbox高级技巧1. 多行布局2. 对齐方式3. 基线对齐 CSS变量&#xff08;自定义属性&#xff09;1. 动态变化2. 继承与覆盖 高级媒体查询1. 多条件查询2. 特性查询 高性能与最佳实践1. CSS代码…