纵有疾风起
人生不言弃

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

方法一: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;   // 请求数据
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 < 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"); }
})

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

  

 

文章转载于:https://www.cnblogs.com/wuliujun521/p/11459601.html

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 微信小程序下拉加载和上拉刷新两种实现方法

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活