【java小程序】分页显示视频列表

###内容目录（由[TOC]自动生成）

小程序视频进行分页展示，后端进行分页查询，后端的分页主要使用了PageHelper插件，小程序端通过wx：for对视频集合进行遍历显示。

分页查询的后端代码

1、server的实现类
PageHelper.startPage方法设置页面的当前页数和每页的显示数目。
PageInfo对查询的list数据进行设置。

   @Override
    public PageResult getAllVideos(Integer page, Integer pageSize) {
        PageHelper.startPage(page,pageSize);
        List<VideosVo> list = videosMapperCustom.queryAllVideos();

        PageInfo<VideosVo> pageList = new PageInfo<>(list);
        PageResult pageResult = new PageResult();
        pageResult.setPage(page);
        pageResult.setTotal(pageList.getPages());
        pageResult.setRecords(pageList.getTotal());
        pageResult.setRows(list);
        return pageResult;
    }

2、controller类

    @ApiOperation(value = "分页查询",notes = "分页查询的接口")
    @PostMapping(value = "/showAll")
    public IMoocJSONResult showAll(Integer page,Integer pageSize){
        if (page == null) {
            page = 1;
        }
        PageResult pageResult = videoService.getAllVideos(page,PAGE_SIZE);
        return IMoocJSONResult.ok(pageResult);
    }

小程序端代码

index.wxml

 <view wx:for="{{videoList}}"wxclass='item-container'> 
     <view style='width:{{screeWidth}}px;height:210px;' class='back-img'>
        <image src="{{serverUrl}}{{item.coverPath}}" style='width:{{screenWidth}}px;height:210px;' mode="aspectFit" bindtap='showVideoInfo' data-arrindex='{{index}}'></image>
     </view>

     <view class="desc">
         <view class="faceName">
           <image class='myface' src="{{serverUrl}}{{item.faceImage}}"></image>
           <view class="nickname">{{item.nickname}}</view>
         </view>
     </view>
 </view> 

index.wxss

.item-container {
  position:relative;
}
.cover {
  width: 100%;
  height: 400rpx;
  display: block;
}
.back-img{
  display: block;
  background-color: black;
}

.desc{
  margin-top: -40rpx;
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
}

.desc .right{
   display: flex;
   flex-direction: column;
   align-items: center;
}

.desc .faceName {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-left:  10px;
}

.title {
   font-size: 30rpx;
   margin-top: 10rpx;
   margin-left: 20rpx;
   width: 600rpx;
}

.myface {
   display: block;
   width: 60rpx;
   height: 60rpx;
   border-radius:  30rpx;
   margin-top: 10rpx;
   margin-right:  20rpx;
}

.nickname {
   font-size: 20rpx;
   margin-top: 6rpx;
   margin-right: 20rpx;
   color:darkgray;
}

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    screenWidth: 350,
    //分页的属性
    totalPage: 1,
    page: 1,
    videoList: [],
    serverUrl: ""
  },
  onLoad: function (params) {
    var me = this;
    //获取设备系统信息的同步api
    var screenWidth  = wx.getSystemInfoSync().screenWidth;
    me.setData({
      screenWidth: screenWidth,
    });
    //获取当前分页数
    var page = me.data.page;
     me.getAllVideoList(page);
  },
   getAllVideoList: function (page){
     var me = this;
     var serverUrl = app.serverUrl;
     wx.showLoading({
       title: '请等待，加载中...',
     });

     wx.request({
       url: serverUrl + '/video/showAll?page=' + page,
       method: "POST",
       success: function (res) {
         wx.hideLoading();
         wx.hideNavigationBarLoading();
         wx.stopPullDownRefresh();
         
         console.log(res.data);
         //判断当前页page是否是第一页，如果是第一页，那么设置videoList为空
         if (page === 1) {
           me.setData({
             videoList: []
           });
         }
         //页面数据拼接
         var videoList = res.data.data.rows;
         var newVideoList = me.data.videoList;

         me.setData({
           videoList: newVideoList.concat(videoList),
           page: page,
           totalPage: res.data.data.records,
           serverUrl: serverUrl
         })
      
       }
     })
   },

})

用户上拉事件，

   //用户上拉事件
  onReachBottom: function () {
    var me = this;
    var currentPage = me.data.page;
    var totalPage = me.data.totalPage;

    // 判断当前页数和总页数是否相等，如果想的则无需查询
    if (currentPage === totalPage) {
      wx.showToast({
        title: '已经没有视频啦~~',
        icon: "none"
      })
      return;
    }

    var page = currentPage + 1;

    me.getAllVideoList(page);
  },

用户下拉事件，页面重新加载第一页，并且需要在index.json中进行下拉事件开启配置：

{
  "enablePullDownRefresh":true,
  "backgroundTextStyle":"dark"
}

   onPullDownRefresh:function(){
     wx.showNavigationBarLoading();
     this.getAllVideoList(1);
   },