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

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

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

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

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

  1. 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 插件市场

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

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

相关推荐
济南壹软网络科技有限公司14 小时前
国际盲盒电商新范式:深度剖析 V4 系统的全球化云原生架构
uni-app·盲盒源码·国际盲盒源码·盲盒开源源码·多语言盲盒源码
2501_9159184118 小时前
HTTPS 端口深度解析,443 并不是唯一入口,理解 TLS 流量行为与抓包策略
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9160088919 小时前
iOS 开发者工具全景图,构建从编码、调试到性能诊断的多层级工程化工具体系
android·ios·小程序·https·uni-app·iphone·webview
走,带你去玩19 小时前
uniapp live-pusher + 腾讯云直播
前端·javascript·uni-app
2501_9159214320 小时前
从需求到上架,现代 iOS 开发流程的工程化方法论
android·ios·小程序·https·uni-app·iphone·webview
oxygen-120421 小时前
uniapp 锚点跳转
uni-app
脾气有点小暴1 天前
UniApp实现刷新当前页面
开发语言·前端·javascript·vue.js·uni-app
济南壹软网络科技有限公司1 天前
掘金国际盲盒电商:UniApp + ThinkPHP6 构建的全球化技术基石
uni-app·开源·盲盒源码·国际盲盒
一只一只妖1 天前
uni-app + ts请求封装最佳实践(GET/POST + 加载态 + 错误兜底)
typescript·uni-app
2501_916007472 天前
苹果手机iOS应用管理全指南与隐藏功能详解
android·ios·智能手机·小程序·uni-app·iphone·webview