本案例综合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)
},
```
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event（事件）
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范