## 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)) }) }, } ```