用AI赚第一桶💰低成本搭建一套AI赚钱工具,源码可二开。 广告
本案例综合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) }, ```