了解微信小程序下拉刷新功能

小程序提供了这个事件。

onPullDownRefresh()

监听用户下拉刷新事件。

如果要开启下拉刷新功能，要先到json配置:

"enablePullDownRefresh":true

配置后下拉有反应了但是没有加载效果，在onPullDownRefresh()事件介绍那里没有提到，在全局配置那里提到。

backgroundTextStyle

在json内加

"backgroundTextStyle": "dark"

下拉就有加载效果了。

 

现在做一个例子。

直接在js的Page上面定义一个数据当外部数据。

var mydata=[
      {name:'苹果'},
      { name: '香蕉' },
      { name: '菠萝' },
      { name: '雪梨' },
      { name: '葡萄' },
      { name: '荔枝' },
      { name: '芒果' },
      { name: '哈密瓜' },
      { name: '西瓜' },
      { name: '橙子' },
      ]

Page的data里面;

data: {
    fruits: [],
  },

在onload里面选取5个数据，即是页面显示5个数据。到时下拉再显示剩下的数据。

let f = []
    for (let i = 0; i < 5; i++){
      f[i]= mydata[i].name
  }
   this.setData({
      fruits:f,
    })

在wxml页面里,支持for循环。

<view wx:for='{{fruits}}' wx:key='index' class="fruit">
{{item}}
</view>

wxss定义一下显示样式，加边框字体框内居中;

.fruit{
  display: flex;
  margin: 10rpx;
  padding:10rpx 10rpx;
  align-content: center;
  justify-content: center;
  width: 150rpx;
  border: 1px solid #000
}

保存如图;

现在到xx.js找到
onPullDownRefresh事件
在里面写上下拉刷新显示剩下的数据。取到剩下的数据加到原数据上。

let f = []
    let d=0
    for (let i = 5; i < mydata.length; i++) {
      f[d] = mydata[i].name
      d++
    }
    
    this.setData({
      fruits: this.data.fruits.concat(f),
    })

这样一点下拉就将剩下的数据显示出来了，但是没有开始加载效果，和结束加载效果(在模拟器可能看不到明显效果，用手机测试效果就明显了)。加上如下代码。

wx.showNavigationBarLoading()//开始加载效果
wx.hideNavigationBarLoading()//完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新

onPullDownRefresh内完整代码;

wx.showNavigationBarLoading();
    let f = []
    let d=0
    for (let i = 5; i < mydata.length; i++) {
      f[d] = mydata[i].name
      d++
    }
    
    this.setData({
      fruits: this.data.fruits.concat(f),
    })
    wx.hideNavigationBarLoading()//完成停止加载
    wx.stopPullDownRefresh() //停止下拉刷新

如图；

这样完成了下拉刷新加载效果。

最近了解了一下微信小程序开发，能力有限，顺便做了个简易画板小程序

 

 

转载于:https://my.oschina.net/oisanblog/blog/3064084