下面介绍下小程序下拉的效果，规则:
- 刚进入页面时显示八项数据，当页面底部上拉时数据增加，数据加载完显示no more
- 当在顶部下拉时，页面重新加载，恢复只有8项数据
- 用mock做后台数据
- 用node.js造后台
介绍Mock造数据(具体参考MOCK文档，此操作是在vscode中操作的)
- Mock作用：生成随机数据，拦截 Ajax 请求。我们本章主要是生成随机数据
- 需要引入mock文件，可以去BootsCDN网站复制链接
- 我们需要的数据用Mock.Random 生成，Mock.Random 是一个工具类，用于生成各种随机数据，Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock.js"></script>
<script>
let arr = Mock.mock({
'list|10':[{
'name':'@cWord(2,3)',//随机中文名，2-3个字符
'englishName':'@word(2,5)',//随机英文名，2-5个字符
'date':'@date("yyyy-MM-dd")',//随机输出日期,格式为yyyy-MM-dd
'image':'@image("100×100")',//随机生成大小为100*100的图片，也可指定背景颜色等
'address':'@address(true)'//如果显示的是true,则加上所属的省
}]
})
console.log(arr)
</script>
结果如下
image
强烈建议大家看下Mock的官方文档，了解下都有哪些功能，留下印象
node.js造后台(Mock造数据)
- 需下载node.js软件，安装好win+R=》cmd输入node -v查看当前版本,查看是否安装成功
- 输入node可以进入node环境，如下
image
-
我们在vscode中创建一个node项目，新建node.js文件，下面开始配置环境
- 打开终端，输入npm init -y，生成默认的package.
- 输入npm i express --save 安装express包
- 输入npm install mockjs 安装mockjs包
- 输入npm i -g nodemon安装监听node代码变化的工具，输入nodemon开启
- 上面的安装了一次后面新建项目就不用再安装了，但是每次打开需输入nodemon
- 输入node node.js(文件名),在node环境下运行node.js
上代码
//require为引用模块
let express = require('express')
let Mock = require('mockjs')
//将Mock造的数据解构，这样下面可以直接提取goodsList变量
let {goodsList} = Mock.mock({
'goodsList|50':[{
"id|+1":1001,
"name":"@cword(3,5)",
"price":"@integer(10,50)"
}]
})
let app=express()
//输入网址http://localhost:8888/list，会显示出来的结果
//request和response对象来处理请求和响应的数据。
app.get('/list',(req,res)=>{
//req为请求的数据设置pageIndex为请求的页码，若前端请求数据没有请求此数据，则默认第一页
let pageIndex=parseInt(req.query.pageIndex || 1)
let pageSize = parseInt(req.query.pageSize || 10)
//根据规律得出每页的数据在数组的开始和结束的下标
let start = pageSize*(pageIndex-1)
let end = start + pageSize
//设置1s延时，这样方便后面小程序代码loading的效果
setTimeout(() => {
//goodsList是一个数组，用slice方法截取当前页的数据
res.json(goodsList.slice(start,end))
}, 1000);
})
//app.listen启动一个服务器来监听连接，成功的话终端会打印app is running...
app.listen(8888,()=>{
console.log('app is running...');
})
输入网址http://localhost:8888/list得到数据，可通过http://localhost:8888/list?pageIndex=3得到第三页的数组
image
小程序调用数据
- 需要引用之前封装的$get函数
- 上拉刷新事件，需在当前页面的json文件中开启当前页面下拉刷新。
{
"usingComponents": {},
"enablePullDownRefresh": true,
"backgroundColor": "#f00"
}
<!--pages/shoppingCar/shoppingCar.wxml-->
<view wx:for='{{goodsList}}' wx:key='id'
style="border-bottom:2rpx solid #eee;padding:20rpx 5rpx;">
<view>id:{{item.id}}</view>
<view>商品名字：{{name}}</view>
<view>单价：{{price}}</view>
</view>
// pages/shoppingCar/shoppingCar.js
import {
$get,
} from '../../utils/fun.js'
Page({
async pull() {
//之前$get封装时已经将url地址的常量封装，所以只要输入list拼接就可
let goodsList = await $get('list', {
//每次执行函数时页数+1
pageIndex: this.data.pageIndex++,
pageSize: 8
})
//当没有数据时，goodsList数组为空，此时结束后面的操作显示no more
if (!goodsList.length)
return wx.showToast({
title: 'no more',
icon: 'none'
})
this.setData({
//用concat拼接数组，使上拉时不是切换页面的效果而是拼接的效果
goodsList: this.data.goodsList.concat(goodsList)
})
},
/**
* 页面的初始数据
*/
data: {
goodsList: [],
pageIndex: 1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.pull()
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
//当下拉时执行1s后停止下拉
setTimeout(() => {
wx.stopPullDownRefresh()
}, 1000)
//下拉后数据清空，所以数据改为原始数据
this.data.goodsList = [],
this.data.pageIndex = 1,
//执行pull函数
this.pull()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
//页面加载时执行pull函数
this.pull()
}
})
