首页 > 编程语言 >使用uniapp 微信小程序一些好用的插件分享

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

时间:2025-01-08 15:58:30浏览次数:3  
标签:uniapp 插件 微信 下拉框 item paging id 选择器

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

 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 级联选择器无法选择任意一级,用这个就解决了

标签:uniapp,插件,微信,下拉框,item,paging,id,选择器
From: https://blog.csdn.net/m0_71835253/article/details/145010168

相关文章

  • 如何彻底清理C盘微信聊天记录?方法一览
    彻底清理C盘微信聊天记录,可以通过以下几种方法来实现:一、微信内置功能清理清理缓存:打开微信电脑版,进入“设置”界面。在“通用设置”中,找到并点击“清理缓存”按钮。这将删除微信的一部分临时文件,但可能不包括所有聊天记录。清理聊天记录:同样在“通用设置”中,找到并......
  • 记录一下uniapp vue3 mqtt app端的接入
    原生微信小程序MQTT.js可用版本有v4.2.1、v4.2.0、v4.1.0和v2.18.9npminstallmqtt@4.2.1||yarnaddmqtt@4.2.1使用uniapp框架搭建微信小程序MQTT.js可用版本有v4.1.0和v2.18.9npminstallmqtt@4.1.0||yarnaddmqtt@4.1.0app这里用npminstallm......
  • uniapp 荣耀手机 没有检测到设备 运行到Android手机 真机运行
    背景:使用uniapp框架搭建的项目,开发的时候在浏览器运行,因为项目要打包成App,所以需要真机联调,需要运行到Android手机,在手机上查看/运行项目。通过真机调试才能确保软件开发的准确性和页面显示的完整性。操作步骤:1.Usb连接手机和电脑,电脑上的HbuilderX打开项目;2.手机打开开发......
  • MybatisPlus插件功能-分页查询
    1.分页插件基本用法首先,要在配置类中注册MybatisPlus的核心插件,同时添加分页插件:@ConfigurationpublicclassMybatisConfig{@BeanpublicMybatisPlusInterceptormybatisPlusInterceptor(){//初始化核心插件MybatisPlusInterceptorinterc......
  • 基于java的SpringBoot/SSM+Vue+uniapp的工贸学生信息管理系统的详细设计和实现(源码+l
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • AI编程工具使用-使用豆包大模型MarsCode AI编程插件结合IDEA辅助程序员编程使用实例
    1.MarsCode介绍 MarsCode是一个AI驱动的云端集成开发环境(IDE),支持作为VSCode和JetBrains等主流IDE的智能编程扩展使用。其主要功能包括代码补全、生成、优化、解释、注释生成、单元测试生成、错误修复等,并且支持云函数开发、API测试、存储和部署工具等‌。MarsCode支持多......
  • 安装zsh并配置自动补全插件
    安装sudoaptinstallzsh更改配置/etc/pam.d/chsh文件中的authrequiredpam_shells.so替换为authsufficientpam_shells.so然后切换默认shell$chsh-s/usr/bin/zsh退出重新登录即可默认进入zsh安装oh-my-zsh首先需要安装gitaptinstall......
  • IDEA maven生存期中package和插件中的jar有什么区别
    在IntelliJIDEA中使用Maven时,你可能会遇到两种类型的JAR文件:打包(package)过程中生成的JAR和Maven插件中的JAR。这两种JAR文件有不同的来源和用途:1.打包(Package)过程中生成的JAR这些JAR文件是由你的Maven项目构建过程中生成的。当你运行 mvnpackage 或......
  • 【MyBatis-Plus 分页插件】深入分析和实战解析
    分页是Web应用开发中的高频需求,而在MyBatis的生态中,MyBatis-Plus分页插件和PageHelper是两种常见的实现方案。本文将通过工作机制、使用方法和细节剖析,带你循序渐进地掌握这两种方式,并为你的项目选择提供指导。一、什么是分页?分页的核心目标是减少数据传输......
  • EmbedPress Pro v3.6.10 — WordPress多合一嵌入插件
    获取:EmbedPressProv3.6.10— WordPress多合一嵌入插件 EmbedPressPro是一款高级插件,主要用于在网站(WordPress网站)中轻松嵌入各种类型的多媒体内容。一、主要功能多媒体嵌入它支持嵌入来自众多流行平台的内容。例如,可以嵌入YouTube、Vimeo等视频平台的视频。这意味......