使用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  根据自己接口哀求修改
演示代码如下：

1. <template>
2.         <z-paging ref="paging" @query="queryList">
3.                 <view class="box">
4.                         <view class="box-item" v-for="item in listData" :key="item.id" @click="detail(item)">
5.                                 <view>
6.                                         <view class="center">项目编号：{{item.itemNumber}}</view>
7.                                         <view class="center">委托单位：{{item.entrustUnit}}</view>
8.                                         <view class="center">项目/线路名称：{{item.itemName}}</view>
9.                                         <view class="center">检测日期：{{item.checkDate}}</view>
10.                                         <view class="center">交付日期：{{item.deliveryDate}}</view>
11.                                         <view class="center">检测数量：{{item.detectionQuantity}}</view>
12.                                         <view class="center">细分产品：{{item.segmentedProduct}}</view>
13.                                 </view>
14.                                 <u-icon name="arrow-right"></u-icon>
15.                         </view>
16.                        
17.                 </view>
18.         </z-paging>
19. </template>
21. <script>
22.         import {
23.                 $listDelivery
24.         } from '@/api/testingManagement/projectDelivery.js'
25.         export default {
26.                 data() {
27.                         return {
28.               listData:[],
29.                         }
30.                 },
31.                 created() {
33.                 },
34.                 methods: {
36.                         detail(item){
37.                                 this.$tab.navigateTo(
38.                                         `/workpages/projectDelivery/index?id=${item.id}`
39.                                 );
40.                         },
41.                         queryList(pageNo, pageSize) {
42.                                 $listDelivery({
43.                                         pageNum: pageNo,
44.                                         pageSize
45.                                 }).then(res => {
46.                                         this.$refs.paging.complete(res.rows);
47.                                         const newRows = res.rows;
48.                                         const seenServiceIds = new Set(this.listData.map(item => item.id));
49.                                         const filteredRows = newRows.filter(item => {
50.                                                 if (!seenServiceIds.has(item.id)) {
51.                                                         seenServiceIds.add(item.id);  
52.                                                         return true;  
53.                                                 }
54.                                                 return false;
55.                                         });
56.                                         this.listData = [...this.listData, ...filteredRows];
57.                                 }).catch(res => {
58.                                         this.$refs.paging.complete(false);
59.                                 })
60.                         }
61.                 }
62.         }
63. </script>

复制代码

地址：【z-paging-x下拉革新、上拉加载】z-paging uniappx版已上线！ - DCloud 插件市场
3. xm-cascader  级联选择器 cascader 部门选择器 可选择恣意一级
使用这个的原因是 uniui 级联选择器无法选择恣意一级，用这个就办理了

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。