WeChat mini program function implementation: slide up to load and pull down to refresh

The content of this article is about the implementation of the WeChat applet function: slide up to load and pull down to refresh. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

As mentioned before, the data loading of the article list is loaded all at once, which is unfriendly. This chapter introduces loading and refreshing.

Let’s first introduce how to simulate the slide-up operation in the IDE. At first, I clicked on the article list with the mouse, and then moved up. There has been no result, I thought there was something wrong with the code. In fact, it is not the case. You only need to use the mouse wheel to slide up and down.

First, let’s complete the slide-up and pull-down functions.

list.wxml file:

<view  class="page">
    <view class="page__bd">
        <!--用name 定义模版-->
        <template name="msgTemp">
            <!--
            1. scaleToFill : 图片全部填充显示，可能导致变形 默认
            2. aspectFit ： 图片全部显示，以最长边为准
            3. aspectFill ： 图片全部显示，以最短边为准
            4. widthFix ： 宽不变，全部显示图片
            -->
            <view  class="weui-panel__bd">
                <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                        <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/>
                    </view>
                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                        <view class="weui-media-box__title">{{title}}</view>
                        <view class="weui-media-box__desc">{{time}}</view>
                    </view>
                </navigator>
            </view>
        </template>
        
        <scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh"  bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access">
            <view class="weui-panel__hd">文章列表</view>
                <view wx:for-items="{{msgList}}" wx:key="{{item.id}}">
                    <view class="kind-list__item">
                        <!--用is 使用模版-->
                        <template is="msgTemp" data="{{...item}}"/>
                    </view>
                </view>
        </scroll-view>
        <view>
            <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
            </loading>
        </view>
    </view>
    <view class="page__ft">
    </view>
</view>

Based on the original, it has been used more A scroll-view (official document: https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html) I am loading the article list above,

The first step is to set scroll-y = true to allow it to scroll vertically,

The second step is to allow it to scroll vertically scroll-y = true Step: Give a fixed height, which is also clearly required in the document. Here is the dynamically obtained height and width of the mobile phone configuration.

Step 3: Set the bindscrolltoupper (pull-down) and bindscrolltolower (slide-up) response methods.

Step 4: To set scroll-top (for positioning) and bindscroll (executed when scrolling, and The former can be used together to achieve positioning effect)

Step 5: Load the page icon settings and copy them directly.

list.js file:

##

// pages/list/list.js
var app = getApp();

// 当前页数
var pageNum = 1;


// 加载数据
var loadMsgData = function(that){
  that.setData({
    hidden:false
  });
  var allMsg = that.data.msgList;
  app.ajax.req('/itdragon/findAll',{
    "page":pageNum , "pageSize" : 6
  },function(res){  
    // 不能直接 allMsg.push(res); 相当于list.push(list);打乱了结构
    for(var i = 0; i < res.length; i++){
      allMsg.push(res[i]);
    }
    that.setData({
      msgList:allMsg
    });
    pageNum ++;
    that.setData({
      hidden:true
    });
  });
}

Page({
  data:{
    msgList:[],
    hidden:true,
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData( {
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    });
    loadMsgData(that);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  // 下拉刷新数据
  pullDownRefresh: function() {
    var that = this;
    pageNum = 1;
    that.setData({
      msgList : [],
      scrollTop : 0
    });
    loadMsgData(that);
  },

  // 上拉加载数据 上拉动态效果不明显有待改善
  pullUpLoad: function() {
    var that = this;
    loadMsgData(that);
  },
  // 定位数据
  scroll:function(event){
    var that = this;
    that.setData({
      scrollTop : event.detail.scrollTop
    });
 },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

First point: If you don’t understand the methods in app.ajax.req, you can refer to: WeChat applet request request (with corresponding interface source code)

Second point: Because it is a paging query, the last query content needs to be saved, so list.push is used to splice it.

The third point: after each query, the page number must be incremented by one, and the loaded icon must be displayed before loading and hidden after loading.

The fourth point: page loading initialization to obtain setting information, official document: https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html# wxgetsysteminfoobject

The fifth point: drop-down logic, set the page number to one, clear the msgList content, position it 0px from the top, and finally call the method of loading data.

The sixth point: The logic of sliding up is called directly. Because the anchor point has been assigned a value in the scorll method.

The seventh point: If you call my interface, the appid cannot be used. You need to create a new project and select no appid.

In this way, the loading and refreshing are completed. Although I am not satisfied with the refreshing, I have found many examples on the Internet like this. If there is a good effect, please enlighten me.

Related recommendations:

Detailed explanation of the implementation method of pull-down refresh and pull-up loading in WeChat applet

The WeChat applet implements pull-down loading and pull-up refresh in detail

The above is the detailed content of WeChat mini program function implementation: slide up to load and pull down to refresh. For more information, please follow other related articles on the PHP Chinese website!