Erlo

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

2019-09-05 00:00:00 发布   960 浏览  
页面报错/反馈
收藏 点赞

方法一: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


 
  
   
     
       
       
         {{item.name}}
         {{item.short_description}}
       
     
   
   
     
   
 

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;
 // 请求数据
var loadMore = function(that){ that.setData({ hidden:false }); wx.request({ url:url,
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 })

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;
}

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

登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认