更新记录

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。