当前位置：首页 > news >正文

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

news 2025/7/18 3:20:47

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

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