开发上滑加载更多功能
整个程序已经发布到git
git源码点击
为什么要做这个
- 当我们打开首页时,我们想展示一些信息的时候,不可能全加载出来,这样你的数据库压力会很大,而且你的前端页面请求会很卡,因为要全部加载出来再分页不现实,尤其是你的数据库特别大的时候
- 所以我想到了用后台处理分页,前端给请求页数实现数据的拼接模式,便可降低数据库压力,也能使前端加载的特别快!
一.微信小程序页面(贴出部分有用的代码,之后完整代码会上传到git)
- 这里用了colourUI的css库,要去安装!
- 这是我的一个项目里面的代码,登录后可以查看信息,列表渲染一个数组就能出现画面中的东西了
.wxml页面
<view id='container'>
<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="3000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
<swiper-item wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}">
<view class="swiper-item">
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
</view>
</swiper-item>
</swiper>
<view class='border'></view>
<view wx:if="{{!show}}" class="containertext">
<text class="text">还未登录哦</text>
<text class="textlight">登陆后可查看更多信息~</text>
</view>
<view wx:if="{{show}}" wx:for-items="{{allData}}" wx:for-item="item">
<view bindtap="makeList">
<image src="/pages/icons/zengjia.png" class="round-click"></image>
</view>
<view class="cu-list menu-avatar comment solids-top">
<view class="cu-item">
<view class="cu-avatar round" style="background-image:url({{item.userDO.userAvatar}});"></view>
<view class="content">
<view class="text-grey">昵称:{{item.userDO.userName}}</view>
<view class="text-gray text-content text-df">
想要发布的时间:{{item.wantDay}}
</view>
<view class="bg-grey padding-sm radius margin-top-sm text-sm">
<view class="buju">
<view>歌名为: {{item.songName}}</view>
<view class="flex-sub">留言为: {{item.content}}</view>
</view>
</view>
<view class="margin-top-sm flex justify-between">
<view class="text-gray text-df">{{item.postDate}}</view>
<view>
<text class="cuIcon-appreciatefill text-red"></text>
<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
.js页面
- onShow()在页面展示的时候会调用,当进入这个页面的时候,我们先发一个请求获取第一页的值,并且保存下来值也页码值(page=1)
- 处理后台的数据存到页面中
onShow(){
var that = this
var userId = "userId";
if (wx.getStorageSync(userId)) { //获取得到登录时保存的userId缓存
that.setData({
show: true
})
wx.request({
url: app.globalData.server_prefix+'/api/v1.0/songlists/list/allList',//你自己的真实的接口
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
page: 1 //初始的页面值为第一页,把参数给后台
},
success: function (res) {
console.log(res.data)
that.setData({
allData: res.data.data, //请求成功后把返回值设置到页面data中
page: 1 //请求成功后把页码值设置到页面data中
})
}
})
}
},
上拉加载函数
- 这里用到了微信框架的onReachBottom()函数,只要上拉就会触发这个函数
- 当上拉时,先出现一个加载图标转圈圈,提高用户体验
- 然后把页面data里面的page值+1,因为是第二页了,最开始加载的时候是第一页,上拉就变成第二页
- 发送request请求,参数为页面参数page(从1变为了2),返回的参数也是第二页的参数
- concat()链接两个或多个字符串,将返回的第二页的值加到原有第一页值的后面
- 当页码数超过后,后台不返回值的时候,这时候再上滑只是页面数+1,返回的值不变
//上拉加载
onReachBottom: function () {
var that = this;
// 显示加载图标
wx.showLoading({
title: '玩命加载中',
})
// 页数+1
that.data.page = that.data.page+1;
wx.request({
url: app.globalData.server_prefix+'/api/v1.0/songlists/list/allList',
method: "GET",
// 请求头部
header: {
'content-type': 'application/text'
},
data: {
page: that.data.page
},
success: function (res) {
console.log(res)
// 回调函数
const oldData = that.data.allData;
that.setData({
allData: oldData.concat(res.data.data)//将返回的值拼接到原有的里面
})
// 隐藏加载框
wx.hideLoading();
}
})
},
二.后台代码(贴出部分有用的代码,之后完整代码会上传到git)
后台用的是springboot与mybatis,分页用的PageHelper
1. 导入pom
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
2. application.yml
pagehelper:
helperDialect: mysql
supportMethodsArguments: true
params: count=countSql
reasonable: false
其中pagehelper.reasonable这个属性含义是分页参数合理化,3.3.0以上版本可用。默认值为false,但是养成良好习惯,对于自己用到的配置,就算有默认值,也重新写。防止因为版本的变化,导致默认值有变化。 当启用合理化时,如果pageNum>pageSize,默认会查询最后一页的数据。禁用合理化后,当pageNum>pageSize会返回空数据
3. 核心代码
- PageHelper很好的帮我们完成了分页,我们只需传入页数,这里我规定每页数据为5条
- 调用mapper的方法然后返回五条数值
@Override
public List<SonglistsDO> selectAllList(Integer page) {
PageHelper.startPage(page, 5);
List<SonglistsDO> songlistsDOList=songlistsDOMapper.selectAllLists();
return songlistsDOList;
}