微信小程序开发〖三〗上滑加载更多

开发上滑加载更多功能

整个程序已经发布到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;
    }

这样就完成了这次需要的功能了

制作不易,转载请标注~~