使用uniapp 微信小程序一些好用的插件分享

总结一下自己在开发中遇见的一问题,通过引入组件可以快速的解决

 1.zxz-uni-data-select  下拉框选择器(添加下拉框检索,多选功能,多选搜索功能,自定义

下拉框插件,使用这个的原因是因为 uniui  uview  组件库下拉框太难用了,返回的数据每次都需要map 转换数据,真的麻烦,要不就不支持搜索,可以自定义绑定的数据,这个插件可以解决大部分的问题

地址:zxz-uni-data-select 下拉框选择器(添加下拉框检索,多选功能,多选搜索功能,自定义 - DCloud 插件市场

2.  z-paging-x下拉刷新、上拉加载

主要的作用就是一个列表分页加载的效果,uniapp 也有对应的api,如果每一个页面都写,比较麻烦

使用很简单   <z-paging ref="paging" @query="queryList">   绑定queryList  这个方法就可以了,在这个里面调用接口了,不需要在onLoad中调用接口了, 需要注意数据去重

注意: pageNo   pageSize  根据自己接口请求修改

演示代码如下:

<template><z-paging ref="paging" @query="queryList"><view class="box"><view class="box-item" v-for="item in listData" :key="item.id" @click="detail(item)"><view><view class="center">项目编号:{{item.itemNumber}}</view><view class="center">委托单位:{{item.entrustUnit}}</view><view class="center">项目/线路名称:{{item.itemName}}</view><view class="center">检测日期:{{item.checkDate}}</view><view class="center">交付日期:{{item.deliveryDate}}</view><view class="center">检测数量:{{item.detectionQuantity}}</view><view class="center">细分产品:{{item.segmentedProduct}}</view></view><u-icon name="arrow-right"></u-icon></view></view></z-paging>
</template><script>import {$listDelivery} from '@/api/testingManagement/projectDelivery.js'export default {data() {return {listData:[],}},created() {},methods: {detail(item){this.$tab.navigateTo(`/workpages/projectDelivery/index?id=${item.id}`);},queryList(pageNo, pageSize) {$listDelivery({pageNum: pageNo,pageSize}).then(res => {this.$refs.paging.complete(res.rows);const newRows = res.rows;const seenServiceIds = new Set(this.listData.map(item => item.id));const filteredRows = newRows.filter(item => {if (!seenServiceIds.has(item.id)) {seenServiceIds.add(item.id);  return true;  }return false; });this.listData = [...this.listData, ...filteredRows];}).catch(res => {this.$refs.paging.complete(false);})}}}
</script>

地址:【z-paging-x下拉刷新、上拉加载】z-paging uniappx版已上线! - DCloud 插件市场

3. xm-cascader  级联选择器 cascader 部门选择器 可选择任意一级

使用这个的原因是 uniui 级联选择器无法选择任意一级,用这个就解决了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/66578.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云AI代码助手编程挑战赛-有趣的冷知识分享

作品简介 有趣的冷知识这一编程主要用于对于小朋友的探索力的开发&#xff0c;让小朋友在一开始就对学习具有探索精神。在信息化时代下&#xff0c;会主动去学习自己认知以外的知识&#xff0c;同时丰富了眼界&#xff0c;开拓了新的知识。 技术架构 使用python语言的TK库…

使用 SQL 和表格数据进行问答和 RAG(7)—将表格数据(CSV 或 Excel 文件)加载到向量数据库(ChromaDB)中

将表格数据&#xff08;CSV 或 Excel 文件&#xff09;加载到向量数据库&#xff08;ChromaDB&#xff09;中。这里定义的类 PrepareVectorDBFromTabularData&#xff0c;它的主要功能是读取表格数据文件到DataFrame中、生成嵌入向量、并将这些数据存储在向量数据库的集合中&am…

攻防世界 wtf.sh-150

点进去&#xff0c;发现是一个类似于论坛的网站&#xff0c;并且对报错等做了处理 用御剑扫描一下 ​ 发现是php形式的文件&#xff0c;但点进去访问不了。看看wp&#xff0c;发现此题存在路径穿越漏洞&#xff0c;就是&#xff08;如果应用程序使用用户可控制的数据&#xff0…

Vue3组件通讯——自定义事件(子->父)

需求如下&#xff1a; 1.在子组件中&#xff0c;当用户点击提交按钮后&#xff0c;更新数据库 2.数据更新成功后&#xff0c;子组件通知父组件getUserInfo函数&#xff0c;重新获取数据&#xff0c;同步更新 3.子组件等待getUserInfo函数执行完毕后&#xff0c;调用init函数…

mongodb配置文件详解

mongodb 配置文件采用yaml格式&#xff0c;配置文件的选项还是比较多的&#xff0c;下面是一些配置文件解释。 下面提供一份MongoDB副本集在生产环境中的配置 # mongod.conf # # systemLog: systemLog: destination: file logAppend: true path: /data/mongodb/mongodb-vr-2701…

【已解决】如何让容器内的应用程序使用代理?

首先&#xff0c;按照这种配置方法&#xff0c;即通过在 /etc/systemd/system/docker.service.d/http-proxy.conf 中设置代理&#xff0c;它只会影响 Docker 守护进程本身&#xff0c;并不会自动影响 Docker 容器内部的软件或容器中的网络行为。 这意味着&#xff1a; Docker …

2025年:AI化浪潮中的社会变迁与商业革新

随着人工智能(AI)技术的迅猛发展,2025年将成为一个转折点。这一年,AI不仅将深入到日常生活和商业运营的各个角落,还将引发一系列深刻的社会、经济和技术变革。以下是对未来一年可能出现的“AI化”现象的预测与展望。 AI进入主流文化的标志 超级碗广告:在2025年的超级碗上…

Windows 11 上配置VSCode 使用 Git 和 SSH 完整步骤

在 Windows 11 上&#xff0c;通过 VSCode 使用 Git 和 SSH 克隆 GitHub 仓库的完整优化步骤如下&#xff1a; 1. 安装必备工具 下载并安装 Git&#xff1a; 访问 Git 官网 下载最新版本。安装时&#xff0c;选择以下选项&#xff1a; Default editor for Git: Use Visual Stud…

【Spring】Redis缓存+ehcache

文章目录 基于Spring的RedisehcacheRedis 缓存配置Cacheable 注解CacheEvict 注解缓存配置 基于Spring的Redisehcache Redis 缓存配置 在项目中添加 Redis 的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…

UE5 打包要点

------------------------- 1、需要环境 win sdk &#xff0c;大约3G VS&#xff0c;大约10G 不安装就无法打包&#xff0c;就是这么简单。 ----------------------- 2、打包设置 编译类型&#xff0c;开发、调试、发行 项目设置-地图和模式&#xff0c;默认地图 项目…

小程序textarea组件键盘弹起会遮挡住输入框

<textarea value"{{remark}}" input"handleInputRemark" ></textarea> 如下会有遮挡&#xff1a; 一行代码搞定 cursor-spacing160 修改后代码 <textarea value"{{remark}}" input"handleInputRemark" cursor-spacin…

用python 进行雷电接口检测

雷电接口检测工具说明文档 功能概述 这个Python脚本用于检测系统的雷电(Thunderbolt)接口支持情况&#xff0c;包括&#xff1a; 检测系统是否有雷电控制器检测Type-C/雷电端口识别雷电接口版本&#xff08;Thunderbolt 1-5&#xff09;显示理论传输速度列出已连接的雷电设备…

卷积神经网络 (CNN, Convolutional Neural Network) 算法详解与PyTorch实现

卷积神经网络 (CNN, Convolutional Neural Network) 算法详解与PyTorch实现 目录 卷积神经网络 (CNN, Convolutional Neural Network) 算法详解与PyTorch实现1. 卷积神经网络 (CNN) 算法概述1.1 图像处理1.2 CNN的优势2. CNN的核心技术2.1 卷积层2.2 池化层2.3 全连接层2.4 激活…

《深度学习模型在鸿蒙分布式框架下的跨设备高效之旅》

在人工智能领域&#xff0c;深度学习模型的训练与推理通常需要强大的计算资源和大量的数据支持。而鸿蒙系统的分布式框架为解决这一问题提供了新的思路和方法&#xff0c;使得深度学习模型能够在多个设备之间实现高效的训练与推理。 鸿蒙分布式框架概述 鸿蒙系统是一款面向万…

git的rebase和merge的区别?

B分支从A分支拉出 1.git merge 处于A分支执行&#xff0c;git merge B分支:相当于将commit X、commit Y两次提交&#xff0c;作为了新的commit Z提交到了A分支上。能溯源它真正提交的信息。 2.git rebase 处于B分支&#xff0c;执行git rebase A分支&#xff0c;B分支那边复…

Cadence——virtuous生成的symbol其端口自动添加注释

新换的工艺库&#xff0c;环境变量也会发生变化&#xff0c;毕竟每一家PDK下的.cdsinit 和 .cdsenv文件不尽相同。 这次新换的PDK&#xff0c;搭建完Schcematic之后&#xff0c;再生成的Symbol&#xff0c;发现其pin口&#xff0c;也就是端口没有自动生成注释&#xff0c;我就…

Ruby语言的正则表达式

Ruby语言的正则表达式详解 正则表达式&#xff08;Regular Expressions&#xff0c;简称Regex&#xff09;是一种强大的文本处理工具&#xff0c;它可以用来匹配、搜索、替换字符串中的模式。在Ruby语言中&#xff0c;正则表达式的使用非常灵活&#xff0c;并且具有良好的可读…

CClinkIEfield Basic转Modbus TCP网关模块连接三菱FX5U PLC

捷米特JM-CCLKIE-TCP是自主研发的一款CCLINK IE FB从站功能的通讯网关。该产品主要功能是将各种 MODBUS-TCP 设备接入到 CCLINK IE FB网络中。 捷米特JM-CCLKIE-TCP网关连接到CCLINK IE FB总线中做为从站使用&#xff0c;连接到 MODBUS-TCP 总线中做为主站或从站使用。 为了打破…

《分布式光纤测温:解锁楼宇安全的 “高精度密码”》

在楼宇建筑中&#xff0c;因其内部空间庞大&#xff0c;各类电器设施众多&#xff0c;如何以一种既高效又稳定&#xff0c;兼具低成本与高覆盖特性的方式&#xff0c;为那些关键线路节点开展温度监测&#xff0c;是目前在安全监测领域一项重点研究项目&#xff0c;而无锡布里渊…

Docker 专栏 —— Dockerfile 指令详解

文章目录 ADD 复制文件COPY 复制文件ARG 设置构建参数CMD 容器启动命令ENTRYPOINT ⼊⼝点ENV 设置环境变量EXPOSE 声明暴露的端⼝FROM 指定基础镜像LABEL 为镜像添加元数据MAINTAINER 指定维护者的信息RUN 执⾏命令USER 设置⽤户VOLUME 指定挂载点WORKDIR 指定⼯作⽬录 ADD 复制…