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

devtools/2025/1/12 22:55:33/

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

 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.ppmy.cn/devtools/149990.html

相关文章

【赵渝强老师】什么是NoSQL数据库?

随着大数据技术的兴起&#xff0c;NoSQL数据库得到了广泛的应用。NoSQL的全称是Not Only SQL&#xff0c;中文含义是不仅仅是SQL。它泛指所有的非关系型数据库&#xff0c;即&#xff1a;在NoSQL数据库中存储数据的模型可能不是二维表的行和列。NoSQL数据库不遵循关系型数据库范…

Python 基础知识快速过 50题

全篇大概 1000 字&#xff08;含代码&#xff09;&#xff0c;建议阅读时间 5min 1. 将字符串 ‘a is a’ 改为 ‘b is b’ s a is a s.replace(a, b)什么是转义字符 在字符串中如果含有特殊字符如&#xff1a;单引号、双引号。需要再特殊字符前加 “” 反斜杠才能使用。 3.…

SQL从入门到实战-2

高级语句 窗口函数 排序窗口函数 例题二十九 select yr,party,votes, rank() over (PARTITION BY yr ORDER BY votes desc) as pson from ge where constituency S14000021 order by party,yr 偏移分析函数 例题三十 select name,date_format(whn,%Y-%m-%d) data, confi…

Webpack和Vite的区别

一、构建速度方面 webpack默认是将所有模块都统一打包成一个js文件&#xff0c;每次修改都会重写构建整个项目&#xff0c;自上而下串行执行&#xff0c;所以会随着项目规模的增大&#xff0c;导致其构建打包速度会越来越慢 vite只会对修改过的模块进行重构&#xff0c;构建速…

iOS 逆向学习 - Inter-Process Communication:进程间通信

iOS 逆向学习 - Inter-Process Communication&#xff1a;进程间通信 一、进程间通信概要二、iOS 进程间通信机制详解1. URL Schemes2. Pasteboard3. App Groups 和 Shared Containers4. XPC Services 三、不同进程间通信机制的差异四、总结 一、进程间通信概要 进程间通信&am…

代码随想录算法训练营day27

代码随想录算法训练营 —day27 文章目录 代码随想录算法训练营前言一、贪心算法理论基础二、455.分发饼干三、376. 摆动序列53. 最大子数组和总结 前言 今天是算法营的第27天&#xff0c;希望自己能够坚持下来&#xff01; 今日任务&#xff1a; ● 贪心算法理论基础 ● 455.…

案例研究:UML用例图中的结账系统

在软件工程和系统分析中&#xff0c;统一建模语言&#xff08;UML&#xff09;用例图是一种强有力的工具&#xff0c;用于描述系统与其用户之间的交互。本文将通过一个具体的案例研究&#xff0c;详细解释UML用例图的关键概念&#xff0c;并说明其在设计结账系统中的应用。 用…

Spring MVC简单数据绑定

【图书介绍】《SpringSpring MVCMyBatis从零开始学&#xff08;视频教学版&#xff09;&#xff08;第3版&#xff09;》_springspringmvcmybatis从零开始 代码、课件、教学视频与相关软件包下载-CSDN博客 《SpringSpring MVCMyBatis从零开始学(视频教学版)&#xff08;第3版&…