## LoadMore 加载更多 [TOC] 用于列表中，做滚动加载使用，展示 loading 的各种状态，组件名：`ts-load-more` **使用方式：** 在`script`中引用组件 ~~~ import tsLoadMore from "./components/teaset/components/ts-load-more.vue"; export default { components: {tsLoadMore} } ~~~ 在`template`中使用组件 ~~~ <ts-load-more :loadingType="loadingType" @tap="loadMoreSearchResult"></ts-load-more> ~~~ **属性说明：** | 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | loadingType| String | 0| 上拉的状态：0-loading前；1-loading中；2-没有更多了 | | show-image | Boolean | true | 是否显示 loading 图标 | | color | String | #777777 | 图标和文字颜色 | | content-text | Object | `{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}` | 各状态文字说明 | | tap| 点击 ts-load-more 触发事件 | \- | ## 一个综合的例子 # 安装 ~~~shell # 安装 npm install mockjs ~~~ ``` <template> <view class="ts-column"> <ts-banner image="http://via.placeholder.com/750x375"></ts-banner> <view v-for="(item,index) in list" :key="item.id"> <ts-list> <ts-list-item :title="item.title" :note="item.company_address" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"></ts-list-item> </ts-list> </view> <ts-load-more :loadingType="loadingType" @tap="loadMoreSearchResult"></ts-load-more> </view> </template> <script> // import api from '@/common/api/index.js' //导出整个模块 // 或者使用以下语法单独导出子模块 import { company } from '@/common/api/index.js' export default { data() { return { loadingType: 0, //上拉的状态：0-loading前；1-loading中；2-没有更多了 page: 0, list: [], } }, async onPullDownRefresh() { this.list = []; //清除已经加载的数据 this.loadingType = 0; //恢复默认的状态 await this.loadMoreSearchResult() //模拟加载一次数据 setTimeout(() => { uni.stopPullDownRefresh() }, 1000) }, async onLoad() { await this.loadMoreSearchResult() }, async onReachBottom() { await this.loadMoreSearchResult(); }, methods: { async loadMoreSearchResult() { //上拉的状态：0-loading前；1-loading中；2-没有更多了 if (this.loadingType !== 0) { return; } this.loadingType = 1; this.page = this.page + 1; //使用Es2017语法 let response = await company.getList({ page: this.page }); if (response.errno === 0) { this.list = this.list.concat(response.data.data); if (response.data.totalPages == response.data.currentPage) { this.loadingType = 2; //2-没有更多了 } else { this.loadingType = 0; //开启新一轮加载 } } else { this.loadingType = 0; //开启新一轮加载 } } } } </script> <style> </style> ``` ## common/api/company.js ``` const Mock = require('mockjs') export default { getList(map = {}) { return new Promise((resolve, reject) => { let mockOption = { errno: 0, errmsg: '获取信息成功', data: { count: 55, totalPages: 5, pageSize: () => { return parseInt(map.pageSize || 10); }, currentPage: () => { return parseInt(map.page || 1); }, 'data|10': [{ 'id': '@increment()', "title|1": ['深圳市云创得力数据有限公司', '腾讯', '阿里', '百度', '小米科技'], //招聘岗位名称 "company_scale|1": ["10人以下", "10人以上", '50人以上', '100人以上', '500人以上'], //公司规模 "city": "@city()", "company_address": "@county()", //公司地址 "cover_image": "http://via.placeholder.com/200x150", //公司LOGO "tags": ['认证企业', 'IT企业'], "type|1": ['网络游戏', "电子商务", "家政服务", "IT服务", "金融服务", "文体娱乐", "咨询服务", "教育培训"], }] } } resolve(Mock.mock(mockOption)) }) }, getInfo(id, map = {}) { return new Promise((resolve, reject) => { let mockOption = { errno: 0, errmsg: '获取信息成功', 'data': { 'id': '@increment()', "title": "深圳市云创得力数据有限公司", //公司名称 "company_abbreviate": "得力数据", //公司名称缩写 "city": "深圳市 南山区", "cover_image": "http://via.placeholder.com/750x375", //公司LOGO "type|1": ['网络游戏', "电子商务", "家政服务", "IT服务", "金融服务", "文体娱乐", "咨询服务", "教育培训"], "tags": ['认证企业', 'IT企业'], "company_scale|1": ["10人以下", "10人以上", '50人以上', '100人以上', '500人以上'], //公司规模 "description": "@cparagraph(10,20)", //公司介绍 "address": "@county(true)", //工作地点 "welfare": () => { //随机选择3个标签 let array = ["季度奖", "年度体检", "年终双薪", "五险一金", "生日慰问金"]; array.sort(function(a, b) { return Math.random() > 0.5 ? 1 : 0 }); //简单打乱方法 let [a, b, c, ...rest] = array; return [a, b, c]; }, } } resolve(Mock.mock(mockOption)) }) }, } ```