本案例綜合Mockjs，上拉加載更多，下拉刷新等功能 > 本案例需要安裝mockjs模塊 ~~~shell # 安裝 npm install mockjs ~~~ [TOC] # 生成數據 ## 接口規范 模擬服務端基于Thinkjs實現的Restful服務，API返回的數據格式 ``` { errno:0, //錯誤代碼 errmsg:'', //錯誤消息 data:'' //業務數據 } ``` 錯誤代碼表 | 錯誤代碼 | 錯誤描述 | |----------|-------------| | 0 | API正常訪問 | | 1000 | API沒有授權訪問 | | 1001 | API參數校驗錯誤 | 分頁數據規范 ``` { errno: 0, //錯誤代碼 errmsg: '', //錯誤消息 data: '' //業務數據 { count: 55, totalPages: 5, pageSize: 10, currentPage: 1, data: [ // .... 數據列表 ] //業務數據 } } ``` ## 定義業務模塊API模擬數據 > 正是環境需要替換該文件，實現遠程的請求 文件名：`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)) }) }, } ``` `common/api/index.js` ``` import company from './company' export default{ company, } export { company } ``` # 頁面文件 ## 模塊導入 ``` <script> // import api from '@/common/api/index.js' //導出整個模塊 // 或者使用以下語法單獨導出子模塊 import { company } from '@/common/api/index.js' ``` ## 基本用法 ``` <template> <view class="content"> <image class="logo" src="../../static/logo.png"></image> <view> <text class="title">{{title}}</text> </view> </view> </template> <script> import { company } from '@/common/api' import company1 from '@/common/api/company' export default { data() { return { title: 'Hello' } }, async onLoad() { let list = await company.getList(); console.log(list) }, // onLoad() { // company.getList().then((response) => { // // console.log(response); // // }); // // }, methods: { } } </script> <style> .content { text-align: center; height: 400upx; } .logo { height: 200upx; width: 200upx; margin-top: 200upx; } .title { font-size: 36upx; color: #8f8f94; } </style> ``` 文件名：`/pages/index/index.js` ## 使用鏈式語法 ``` <template> <view class="content"> <view style="height: 100upx;" v-for="(item,index) in list" :key="item.id"> {{item.title}} </view> <button @tap="loadMoreSearchResult">{{loadingMessage}}</button> </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: [], } }, computed: { loadingMessage() { const msg = ['上拉加載更多', '正在加載中', '沒有更多數據了'] return msg[this.loadingType]; } }, onLoad() { this.loadMoreSearchResult() }, onReachBottom() { this.loadMoreSearchResult(); }, methods: { loadMoreSearchResult() { //上拉的狀態：0-loading前；1-loading中；2-沒有更多了 if (this.loadingType !== 0) { return; } this.loadingType = 1; this.page = this.page + 1; //使用鏈式語法 company.getList({ page: this.page }).then((response) => { if (response.errno === 0) { console.log(JSON.stringify(response)); 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> .content { text-align: center; } </style> ``` ## 使用Es2017語法 ``` <template> <view class="content"> <view style="height: 100upx;" v-for="(item,index) in list" :key="item.id"> {{item.title}} </view> <button @tap="loadMoreSearchResult">{{loadingMessage}}</button> </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: [], } }, computed: { loadingMessage() { const msg = ['上拉加載更多', '正在加載中', '沒有更多數據了'] return msg[this.loadingType]; } }, 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) { console.log(JSON.stringify(response)); 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> .content { text-align: center; } </style> ``` # 下拉刷新 修改pages.json文件，增加配置項目，在頁面啟用下拉刷新 ``` "enablePullDownRefresh": true ``` ``` { "pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "enablePullDownRefresh": true } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } } ``` 增加下拉刷新的事件處理程序 ``` async onPullDownRefresh() { this.list = []; //清除已經加載的數據 this.loadingType = 0; //恢復默認的狀態 await this.loadMoreSearchResult() //模擬加載一次數據 setTimeout(() => { uni.stopPullDownRefresh() }, 1000) }, ```