更新记录
1.0.0(2025-08-29)
下载此版本
x-list-page
平台兼容性
uni-app
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
- |
√ |
- |
- |
- |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
x-list-page
x-list-page 参数配置
属性名 |
类型 |
可选值 |
默认值 |
说明 |
isScroll |
Boolean |
true/false |
false |
tabs是否可以左右拖动 |
customNavbar |
Boolean |
true/false |
false |
是否启自定义navbar |
showNavbar |
Boolean |
true/false |
true |
是否显示navbar |
customListSearch |
Boolean |
true/false |
false |
自定义listSearch搜索框 |
showListSearch |
Boolean |
true/false |
true |
是否显示listSearch搜索框 |
customNoDate |
Boolean |
true/false |
false |
自定义customNoDate空白页 |
tabList |
Array |
|
|
标签数组,元素为对象,如[{name: '推荐'}] |
hasNextText |
String |
|
没有更多数据了! |
没有下一页提示文字 |
queryData |
Function |
|
|
查询方法 返回【Promise】: resolve({list: data.list,hasNext: data.hasNext}) |
代码块
<template>
<view style="height: 100%">
<x-list-page title="ttt"
ref="XListPage"
:queryData="getList"
:show-navbar="false"
:tabList="tabList"
@handleFilter="handleFilter"
@search="search"
@change="change"
@input="input">
<template v-slot:cardItem="{item}">
<view>{{item.index}}</view>
</template>
</x-list-page>
</view>
</template>
<script>
import XListPage from '../uni_modules/x-list-page/components/x-list-page'
export default {
name: "x-list-page-view",
components: {
XListPage
},
data() {
return {
show: false,
params: {
orderNo: '',
startTime: '',
endTime: '',
deptName: '',
reason: ''
},
propsOptions: {
value: 'dictKey',
label: 'name'
},
selectValue: {
useCarType: [],
allowCarpooling: [],
status: []
},
useCarTypes: [],
weatherCommon: [],
carApplyStatus: [],
tabList: [
{
name: '全部',
status: '',
dataCode: '',
data: []
},
{
name: '未提交',
status: 'draft',
dataCode: '',
data: []
},
{
name: '审批中',
status: 'reviewing',
dataCode: '',
data: []
},
{
name: '审批通过',
status: 'pass',
dataCode: '',
data: []
}
]
}
},
onLoad() {
this.$nextTick(() => {
this.$refs.XListPage.handleGetList();
})
},
methods: {
reset() {
this.$refs.XListPage.handleGetList();
},
getList({page}) {
return new Promise(resolve => {
resolve({
list: [{index: 1}, {index: 2}, {index: 3}],
hasNext: false
})
})
},
handleFilter() {
console.log('handleFilter');
this.show = true;
},
change(index) {
console.log(index);
},
input() {
console.log('input')
},
search() {
console.log('search');
},
}
}
</script>
<style scoped>
</style>