精华内容
下载资源
问答
  • 微信小程序下拉刷新/上拉加载更多

    万次阅读 多人点赞 2017-12-19 09:37:50
    小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效; 看一下json文件 "enablePullDownRefresh": true, 注意这里的true是...

    查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉到达最底部,

    在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;

    看一下json文件

     

    "enablePullDownRefresh": true,


    注意这里的true是布尔型而不是字符;

     

    有同学说设置完之后可以下拉,但是看不到图标;

    在app.json中这样设置;

    这样下拉之后就可以看到了;

    每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数

    直接上代码:

    page为全局变量,用在在后面的加载请求,这里要和编写数据接口的同事讨论好请求;

     

     // 下拉刷新
      onPullDownRefresh: function () {
        // 显示顶部刷新图标
        wx.showNavigationBarLoading();
        var that = this;
        wx.request({
          url: 'https://xxx/?page=0',
          method: "GET",
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            that.setData({
              moment: res.data.data
            });
            console.log(that.data.moment);
            // 隐藏导航栏加载框
            wx.hideNavigationBarLoading();
            // 停止下拉动作
            wx.stopPullDownRefresh();
          }
        })
      },

     

    上拉加载更多:

     

     

    /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        var that = this;
        // 显示加载图标
        wx.showLoading({
          title: '玩命加载中',
        })
        // 页数+1
        page = page + 1;
        wx.request({
          url: 'https://xxx/?page=' + page,
          method: "GET",
          // 请求头部
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            // 回调函数
            var moment_list = that.data.moment;
            const oldData = that.data.moment;
            that.setData({
               moment:oldData.concat(res.data.data)
            })
            // 隐藏加载框
            wx.hideLoading();
          }
        })
    
      },

    完成。

    推荐一下自己的小程序 有兴趣可以交流

     



     

     

    展开全文
  • 微信小程序下拉刷新

    2020-11-25 08:31:22
    微信小程序下拉刷新功能 微信小程序下拉刷新 微信小程序自带下拉刷新的方法,如果在js中自己编写方法的话,需要将自带的方法删掉。 实现方法如下: js 文件 //下拉刷新 onPullDownRefresh: function () { this....

    微信小程序下拉刷新功能

    微信小程序下拉刷新

    微信小程序自带下拉刷新的方法,如果在js中自己编写方法的话,需要将自带的方法删掉。
    实现方法如下:
    js 文件

    //下拉刷新
      onPullDownRefresh: function () {
        this.onLoad()
      },
    

    json 文件

    "enablePullDownRefresh": true,
    

    在这里插入图片描述

    下拉刷新可能会受到自定义组件的影响,我之前在用的时候就收到了其他组件的影响,导致页面不能下拉刷新。
    展开全文
  • 微信小程序下拉刷新上拉加载的两种实现方法,1、利用"onPullDownRefresh"和"onReachBottom"方法实现小程序下拉刷新上拉加载,2、在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上...

    微信小程序下拉刷新上拉加载的两种实现方法,1、利用"onPullDownRefresh"和"onReachBottom"方法实现小程序下拉刷新上拉加载,2、在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上拉加载。

    利用"onPullDownRefresh"和"onReachBottom"方法

    在js文件里直接写"onPullDownRefresh"和"onReachBottom"方法即可;

    xml

    .........

    js

    onPullDownRefresh: function() {

    // Do something when pull down.

    console.log('刷新');

    },

    onReachBottom: function() {

    // Do something when page reach bottom.

    console.log('circle 下一页');

    },

    在scroll-view里设定bindscrolltoupper和bindscrolltolower

    在scroll-view里设定bindscrolltoupper和bindscrolltolower,然后在js里写好触发事件后对应的方法。[注意,使用这个模式一定要设置scroll-view的高度,100%不知道为什么设置后没效果,建议使用100vh]

    xml

    ..........

    js

    onPullDownRefresh: function() {

    // Do something when pull down.

    console.log('刷新');

    },

    onReachBottom: function() {

    // Do something when page reach bottom.

    console.log('circle 下一页');

    },

    原文:http://www.jianshu.com/p/150ab73f1fa7

    ↓ 查看全文

    展开全文
  • 微信小程序 下拉刷新

    千次阅读 2017-02-18 11:30:46
    微信小程序 下拉刷新功能。

    分享一下我使用的上拉刷新的Demo;
    其他的涉及不到  以下代码到js就可以
    将代码写到js中Page里面
    //下拉刷新
      onPullDownRefresh: function () { //下拉刷新
            wx.showToast({
            title: '加载中',
            icon: 'loading',
            duration: 400 
          });
            console.log('--------下拉刷新-------')
            wx.showNavigationBarLoading() //在标题栏中显示加载
    	//这里是你请假刷新的地址 请求的地址。和你Onload 里面wx.request请求一样 粘贴过来就行
    
                  wx.request({
                url: ''
                method: '',
                data: {},
                header: {
                    'Accept': 'application/json'
                },
                success: function(res) {
           
                    }
                    that.setData({studate:res.data.data});
                    //that.data.items = res.data
                },
                complete: function() {
          // complete
          wx.hideNavigationBarLoading() //完成停止加载
          wx.stopPullDownRefresh() //停止下拉刷新
         }
            })
      },
    
    有任何建议或者迷惑请在评论区回答 ,或者私信我。

    展开全文
  • 微信小程序的一些统计页面,例如,查看用户量、浏览量等运营数据,很多时候,我希望能够不时地刷新一下,看看数据有没有变动。所以,比较好的体验是,在页面内提供下拉刷新功能。page json 设置增加配置项...
  • 主要介绍了微信小程序下拉刷新界面的实现的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下
  • 2.在要实现下拉刷新的页面下拉刷新的函数onPullDownRefresh() {wx.showNavigationBarLoading() },二. 上拉加载更多 // 帖子滚动到底部的加载事件lower:function(e){console.log(e)var that = thisvar url = util.api...
  • 1.下拉刷新小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。1. 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件...
  • 主要给大家介绍了关于微信小程序下拉刷新PullDownRefresh的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,200
精华内容 480
关键字:

微信小程序下拉刷新

微信小程序 订阅