精华内容
下载资源
问答
  • 小程序下拉刷新

    2021-01-11 16:43:10
    小程序下拉刷新 1.对要下拉刷新的页面进行配置 { "path": "pages/goods_list/main", "style": { "navigationBarTitleText": "商品列表", "navigationBarBackgroundColor":"#eb4450", ...

    小程序下拉刷新

    1.对要下拉刷新的页面进行配置

    在这里插入图片描述

    {
    			"path": "pages/goods_list/main",
    			"style": {
    				"navigationBarTitleText": "商品列表",
    				"navigationBarBackgroundColor":"#eb4450",
    				"navigationBarTextStyle":"white",
    				"enablePullDownRefresh": true
    			}
    		},
    

    2.使用下拉监听事件

     async onPullDownRefresh() {
          this.goods =[]
          await this.getPageData()
    		//第三步手动关闭下拉
          uni.stopPullDownRefresh();
      }
    

    3 手动关闭下拉(因为小程序不会自动关闭,所以需要我们进行手动)

     uni.stopPullDownRefresh();
    
    展开全文
  • 微信小程序下拉刷新/上拉加载更多

    万次阅读 多人点赞 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();
          }
        })
    
      },

    完成。

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

     



     

     

    展开全文
  • 微信小程序下拉刷新上拉加载的两种实现方法,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

    ↓ 查看全文

    展开全文
  • 下拉刷新是常用操作,微信已经集成好了(真机效果稍有瑕疵)首先需要在.json文件启用下拉刷新{ "enablePullDownRefresh": true,}然后在.js文件,监听下拉操作,处理loading和请求onPullDownRefresh() { wx....

    71c2f31e705c4601a1787d548e355dcd.png

    下拉刷新是常用操作,微信已经集成好了(真机效果稍有瑕疵)

    首先需要在.json文件启用下拉刷新

    {    "enablePullDownRefresh": true,}

    然后在.js文件,监听下拉操作,处理loading和请求

    onPullDownRefresh() {    wx.showNavigationBarLoading();    this.setData({      page: 1 // 分页重置为第1页    });    this.getList();}

    最后在接口请求结束,停止下拉刷新,不然不会触发回弹

    wx.request({    url: 'https://www.xxx.com/api/list',    header: {        "Content-Type": "application/json"    },    data: {        page: this.data.page    },    success() {        // ...    },    fail() {        // ...    },    complete() {        wx.hideNavigationBarLoading();         wx.stopPullDownRefresh();    }})
    展开全文
  • 微信小程序下拉刷新

    2020-11-25 08:31:22
    微信小程序下拉刷新功能 微信小程序下拉刷新 微信小程序自带下拉刷新的方法,如果在js中自己编写方法的话,需要将自带的方法删掉。 实现方法如下: js 文件 //下拉刷新 onPullDownRefresh: function () { this....
  • 微信小程序下拉刷新界面的实现 利用onPullDownRefresh函数设置下拉刷新功能 一、在app.json中,将window选项中的enablePullDownRefresh设为true window:{ enablePullDownRefresh:true }  或者在要刷新的界面...
  • 在微信小程序的一些统计页面,例如,查看用户量、浏览量等运营数据,很多时候,我希望能够不时地刷新一下,看看数据有没有变动。所以,比较好的体验是,在页面内提供下拉刷新功能。page json 设置增加配置项...

空空如也

空空如也

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

小程序下拉刷新