欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序下拉加载和上拉刷新两种实现方法详解

程序员文章站 2023-11-30 20:19:52
方法一:onpulldownrefresh和onreachbottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onpul...

方法一:onpulldownrefresh和onreachbottom方法实现小程序下拉加载和上拉刷新

首先要在json文件里设置window属性

设置js里onpulldownrefresh和onreachbottom方法

下拉加载说明:

当处理完数据刷新后,wx.stoppulldownrefresh可以停止当前页面的下拉刷新。

onpulldownrefresh(){
  console.log('--------下拉刷新-------')
  wx.shownavigationbarloading() //在标题栏中显示加载
  wx.request({
     url: 'https://url',
     data: {},
     method: 'get',
     // options, get, head, post, put, delete, trace, connect
     // header: {}, // 设置请求的 header
     success: function(res){
      // success
     },
     fail: function() {
      // fail
     },
     complete: function() {
      // complete
      wx.hidenavigationbarloading() //完成停止加载
      wx.stoppulldownrefresh() //停止下拉刷新
   }
})  

方法二:在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉

index.wxml

<!--index.wxml-->
 <view class="container" style="padding:0rpx">
  <!--垂直滚动,这里必须设置高度-->
   <scroll-view scroll-top="{{scrolltop}}" scroll-y="true" style="height:{{scrollheight}}px;"
     class="list" bindscrolltolower="binddownload" bindscrolltoupper="topload" bindscroll="scroll">
     <view class="item" wx:for="{{list}}">
       <image class="img" src="{{item.pic_url}}"></image>
       <view class="text">
         <text class="title">{{item.name}}</text>
         <text class="description">{{item.short_description}}</text>
       </view>
     </view>
   </scroll-view>
   <view class="body-view">
     <loading hidden="{{hidden}}" bindchange="loadingchange">
       加载中...
     </loading>
   </view>
 </view>

index.js

var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
 // 请求数据<br> var loadmore = function(that){
  that.setdata({
    hidden:false
  });
  wx.request({
    url:url,<br>    data:{
      page : page,
      page_size : page_size,
      sort : sort,
      is_easy : is_easy,
      lange_id : lange_id,
      pos_id : pos_id,
      unlearn : unlearn
    },
    success:function(res){
      //console.info(that.data.list);
      var list = that.data.list;
      for(var i = 0; i < res.data.list.length; i++){
        list.push(res.data.list[i]);
      }
      that.setdata({
        list : list
      });
      page ++;
      that.setdata({
        hidden:true
      });
    }
  });
}
page({
 data:{
  hidden:true,
  list:[],
  scrolltop : 0,
  scrollheight:0
 },
 onload:function(){
  //  这里要注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onload事件中给scroll-view的高度赋值
   var that = this;
   wx.getsysteminfo({
     success:function(res){
       that.setdata({
         scrollheight:res.windowheight
       });
     }
   });
    loadmore(that);
 },
 //页面滑动到底部
 binddownload:function(){ 
   var that = this;
   loadmore(that);
   console.log("lower");
 },
 scroll:function(event){
  //该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
   this.setdata({
     scrolltop : event.detail.scrolltop
   });
 },
 topload:function(event){
  //  该方法绑定了页面滑动到顶部的事件,然后做上拉刷新
   page = 0;
   this.setdata({
     list : [],
     scrolltop : 0
   });
   loadmore(this);
   console.log("lower");
 }<br> })

index.wxss

/**index.wxss**/
 
 .userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 
 .userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
 }
 
 .userinfo-nickname {
  color: #aaa;
}
 
 .usermotto {
  margin-top: 200px;
 }
 
 /**/
 
 scroll-view {
  width: 100%;
 }
 
 .item {
  width: 90%;
  height: 300rpx;
  margin: 20rpx auto;
  background: brown;
  overflow: hidden;
 }
 
 .item .img {
  width: 430rpx;
  margin-right: 20rpx;
  float: left;
 }
 
 .title {
  font-size: 30rpx;
  display: block;
  margin: 30rpx auto;
 }
 
 .description {
 font-size: 26rpx;
  line-height: 15rpx;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。