注:没有给出wcss,我这里用了colorUi第三方的组件(loading)
一. 概念:
scroll-view
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)
具体参数:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
二.
1> wxml:
<scroll-view scroll-y bindscrolltoupper="scrollToUpper" bindscrolltolower="scrollToLower" scroll-with-animation="true" style="height: {{scrollViewHeight}}px;"> <view class="cu-card case" wx:for="{{studentDatas}}" wx:key="id" id="a-{{item.id}}"> <view class="cu-item shadow"> <view class="image"> <image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="widthFix" lazy-load></image> <view class="cu-tag bg-blue">史诗</view> <view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.name}}</text> </view> </view> </view> </view> <!-- style="position:fixed; bottom:0; width: 750rpx; opacity:0.8;" --> <view hidden="{{!showLoading}}"> <view class="cu-load bg-gray {{loadingState?‘loading‘:‘over‘}}"></view> </view> </scroll-view>
2> js:
Page({ /** * 页面的初始数据 */ data: { /* 加载状态:加载中(false)或加载完毕(true) */ loadingState: true, /* 加载中或加载完毕 */ showLoading: false, /* 第一页 */ pageNo: 1, /* 每页数据条数 */ pageSize: 10, /* 是否还有数据 */ noMore: true, /* 数组 */ studentDatas: [], /* 获取的高度 */ scrollViewHeight: 0, /* 是否已被上拉 */ isUpperPulled: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { /* 取得页面高度 */ wx.getSystemInfo({ success: (res)=> { this.setData({ scrollViewHeight: res.windowHeight }); } }); this.fetchDataList(this.data.pageNo,this.data.pageSize); }, fetchDataList(pageNo,pageSize) { if(this.data.noMore){ wx.request({ url: ‘https://zgxmcp.com/wxtestweb/wxtest/getDatas‘, //url method: ‘GET‘, header: { ‘Content-Type‘: ‘application/json‘}, data: { pageNo: pageNo, pageSize: pageSize }, complete: (res)=> { /* 判断网络通讯状态 */ if(res.statusCode == ‘200‘){ const students = res.data.students if(students.length>0){ if(students.length<10){ this.setData({ loadingState: false, showLoading: false, noMore: false, isUpperPulled: false, studentDatas: this.data.studentDatas.concat(res.data.students) }) }else{ this.setData({ showLoading: false, noMore: true, isUpperPulled: false, studentDatas: this.data.studentDatas.concat(res.data.students) }) } } }else{ console.log(res.statusCode) wx.showToast({ title: "statusCode:"+res.statusCode, icon: ‘none‘ }) } } }) }else{ // 没有更多数据 setTimeout( () => { this.setData({ showLoading: true }) }, 1500) } }, scrollToLower: function(){ if(!this.data.isUpperPulled){ this.setData({ isUpperPulled: true, showLoading: true, pageNo: this.data.pageNo +1 }) this.fetchDataList(this.data.pageNo,this.data.pageSize) } } })
3> 顺便写个后台的数据接口
package com.ewx.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSONObject; import com.ewx.servlet.userinfo.Student; /** * 分页数据模拟 * * @author liuwl */ public class DataServlet extends HttpServlet { private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 设置字符集 req.setCharacterEncoding("UTF-8"); resp.setCharacterEncoding("UTF-8"); // 获取输出 PrintWriter out = resp.getWriter(); JSONObject jsonObj = new JSONObject(); int pageNo = Integer.valueOf(req.getParameter("pageNo")); List<Student> datas = makeData(pageNo); try { Thread.sleep(4000); jsonObj.put("pages", 3); jsonObj.put("pageNo", pageNo); jsonObj.put("students", datas); } catch (InterruptedException e) {} out.print(jsonObj); } static int num = 0; static List<Student> makeData(int pageNo) { int size = 0; if (1 == pageNo) { size = 10; } else if (2 == pageNo) { size = 10; } else if (3 == pageNo) { size = 10; } else if (4 == pageNo) { size = 5; } else { size = 0; } List<Student> students = new ArrayList<Student>(); for (int i = 0; i < size; i++) { students.add(new Student(++num, "" + i, pageNo + "_姓名_" + i, i)); } for (int i = 0; i < students.size(); i++) { System.out.println(students.get(i).toString()); } return students; } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } }
效果如下: