微信小程序学习 下滑刷新、触底上滑刷新

入门学习使用的是测试号。由于访问了https地址获取数据，需要如图设置：

下拉刷新需要在app.json中配置：

"enablePullDownRefresh": true

joke.wxml代码如下，对应的wxss文件就看个人喜好了，对于text对应的class，只设置了width:90%，不让文字靠近屏幕边侧：

<view class="container">
  <text class="display">{
  {joke}}</text>
</view>

 

对应的joke.js代码如下,注释应该很清楚了：

下滑刷新数据，触底时上滑刷新数据。

Page({
  data: {
    joke: "哈哈",
    disabled: false,
    plain: true,
    loading: false,
    jokes: [],//获取的数据
    jokesLength: 0,//获取的数据的长度
    currIndex: 0//当前显示的数据对应的索引
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getJokes();
  },

  /**
   * 触底上拉加载
   */
  onReachBottom: function() {