微信小程序（2）--下拉刷新和上拉加载更多

下拉刷新

1.首先在.json文件中配置（如果在app.json文件中配置，那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中，那么就是对应的页面下拉刷新。）

具体页面的.json文件：

{

  "enablePullDownRefresh":true

}  

app.json文件：

  "window":{

    "enablePullDownRefresh": true

｝

2.js文件中添加回调函数

 /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

上拉加载更多(不需要配置)

  /**

   * 页面上拉触底事件的处理函数

   */

onReachBottom: function () {

 },

1.publish.wxml文件

<block wx:for="{{publishs}}" wx:key="publishs">

<view class="publish">

  <text>{{item.songname}}</text>

</view>

</block>

<view class="weui-loadmore" hidden="{{!isHideLoadMore}}">

    <view class="weui-loading"></view>

    <view class="weui-loadmore__tips">正在加载</view>

</view>

<view class="Completesollow"  hidden="{{!searchLoadingComplete}}">没有更多了...</view>

2.publish.js文件

/**

   * 页面的初始数据

   */

  data: {

    publishs:[],

    isHideLoadMore:false,  //"上拉加载"的变量，默认false，隐藏  

    searchLoadingComplete:false,  //“没有数据”的变量，默认false，隐藏 

    page:, //第一页

    isFromSearch:true

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    this.dataget()

  },

  dataget:function(){

    var that = this

    wx.request({

      url: 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=h5&needNewCode=1&w=%E9%9F%B3%E4%B9%90&zhidaqu=1&catZhida=1&t=0&flag=1&ie=utf-8&sem=1&aggr=0&perpage=20&n=15&p='+this.data.page+'&remoteplace=txt.mqq.all&_=1501467319794', //仅为示例，并非真实的接口地址

      data: {

        x: '',

        y: ''

      },

      header: {

        'content-type': 'application/json'

      },

      success: function (res) {

        console.log(res.data)

          //判断是否有数据，有则取数据

        if (res.data.data.song.curnum!= ) {

          let searchList = [];

          //如果isFromSearch是true从data中取出数据，否则先从原来的数据继续添加  数据继续添加进数组 that.data.publishs.concat

          that.data.isFromSearch ? searchList = res.data.data.song.list : searchList = that.data.publishs.concat(res.data.data.song.list)

        that.setData({

          publishs: searchList,

          isHideLoadMore: true,

        })

        }else{

          that.setData({

            searchLoadingComplete: true, //显示

            isHideLoadMore: false  //把"上拉加载"的变量设为false，隐藏

          });

        }

      }

    })

  },

  //加载更多

  onReachBottom: function () {

    console.log('加载更多')

    setTimeout(() => {

      this.setData({

        // isHideLoadMore: true,

        // searchLoadingComplete: false,

        page:this.data.page+,

        isFromSearch: false

      })

      this.dataget();

    }, )

  },