您的位置:澳门新葡8455最新网站 > 编程教学 > 至于微信小程序设置,小程序下拉

至于微信小程序设置,小程序下拉

发布时间:2019-10-09 10:08编辑:编程教学浏览(56)

    { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" "enablePullDownRefresh": false }}
    

    微信小程序达成列表下拉刷新上拉加载,小程序下拉

    本文实例为大家享用了Android九宫格图片呈现的切实代码,供我们参谋,具体内容如下

    DEMO下载

    效果图

    图片 1

    原理

    利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,进而对页面数据开展改造!

    页面配置JSON

    • enablePullDownRefresh:开启下拉刷新;
    • onReachBottomDistance:页面上拉触底事件触发时距页面尾巴部分距离,单位为px。
    {
     "enablePullDownRefresh": true,
     "onReachBottomDistance": 50
    }
    

    WXML

    <view class="tui-content">
     <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>
    </view>
    

    JS

    这里用setTimeout模拟乞求数据;
    加载数据限制一次,调用wx.showToast呈现没有更好多据。

    Page({
     data: {
     dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
     count : 0
     },
     onPullDownRefresh(){
     var self = this;
     setTimeout(() => {
      // 模拟请求数据,并渲染
      var arr = self.data.dataList, max = Math.max(...arr);
      for (var i = max + 1; i <= max + 3; ++i) {
      arr.unshift(i);
      }
      self.setData({ dataList: arr });
      // 数据成功后,停止下拉刷新
      wx.stopPullDownRefresh();
     }, 1000);
     },
     onReachBottom(){
     var arr = this.data.dataList, max = Math.max(...arr);
     if (this.data.count < 3) {
      for (var i = max + 1; i <= max + 5; ++i) {
      arr.push(i);
      }
      this.setData({
      dataList: arr,
      count: ++this.data.count
      });
     } else {
      wx.showToast({
      title: '没有更多数据了!',
      image: '../../src/images/noData.png',
      })
     }
     }
    })
    

    总结

    非得在每一次数据央求完毕后,使用wx.stopPullDownRefresh()甘休下拉刷新。

    如上正是本文的全部内容,希望对大家的上学抱有助于,也期望我们多多照望帮客之家。

    本文实例为我们大快朵颐了Android九宫格图片展现的现实代码,供我们参谋,具体内容如下...

    onPullDownRefresh: 下拉刷新监听顾客下拉刷新事件。供给在config的window选项中拉开enablePullDownRefresh。当管理完数据刷新后,wx.stopPullDownRefresh能够告一段落当前页面包车型客车下拉刷新。

    在开拓者工具上的模拟器中,苹果和Android设备都得以操作下拉刷新,而且响应onPullDownRefresh事件;

    在真机上,苹果有下拉刷新的效应,但是不会响应onPullDownRefresh事件,这一个效果其实是苹果系统的效益,应该不是小程序的下拉刷新效用,也正是说,苹果系统上符合规律;在Android系统上,有下拉刷新作用,有下拉刷新进度条状态,也会响应onPullDownRefresh事件,相当于说,配置并不曾奏效。

    经测量试验,借使打开下拉刷新功效,在android和IOS中都以能够生效的。

    在onPullDownRefresh响应事件中央市直机关接甘休下拉刷新事件,即调用wx.stopPullDownRefresh接口。效果是有下拉刷新动作,但是未有做其余实际操作。等待微信官方修改那个bug。

    本文由澳门新葡8455最新网站发布于编程教学,转载请注明出处:至于微信小程序设置,小程序下拉

    关键词:

上一篇:微信小程序,为啥不能够分享生活圈

下一篇:没有了