总结一下自己在开发中遇见的一问题,通过引入组件可以快速的解决
1.zxz-uni-data-select 下拉框选择器(添加下拉框检索,多选功能,多选搜索功能,自定义
下拉框插件,使用这个的原因是因为 uniui uview 组件库下拉框太难用了,返回的数据每次都需要map 转换数据,真的麻烦,要不就不支持搜索,可以自定义绑定的数据,这个插件可以解决大部分的问题
地址:zxz-uni-data-select 下拉框选择器(添加下拉框检索,多选功能,多选搜索功能,自定义 - DCloud 插件市场
- 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 插件市场
- xm-cascader 级联选择器 cascader 部门选择器 可选择任意一级
使用这个的原因是 uniui 级联选择器无法选择任意一级,用这个就解决了