小程序子组件列表下拉刷新

最近，研究小程序的过程中，遇到一个问题：小程序的组件Component并没有的Page下拉监听事件：

比如说，下面这样的结构：

那如何才能刷新组件的列表呢：

  1. search-head提供搜索、翻页方法，传递数据给search-list。
  2. search-list组件只显示数据。
  3. page监听onReachBottom事件，然后调用search-head中的方法。

search-head

搜索头部组件，此组件内引用搜索列表组件。在这个组件内，实现搜索、翻页功能。通过组件将数据传递给子组件。

search-head.json

{
  "component": true,
  "usingComponents": {
    "search-list": "/component/search-list"
  }
}

search-head.wxml

<view>
<button type="primary" bindtap="search">搜索</button>
</view>
<search-list list="{{list}}"></search-list>

search-head.js

Component({
  properties: {

  },
  data: {
    list: Array,
    currentPage: 1
  },
  methods: {
    buildObj: function(page) {
      var arr = [];
      for (var i = 1; i <= 30; i++) {
        var obj = {
          id: i,
          value: '第' + page + '页'
        }
        arr.push(obj);
      }
      return arr;
    },
    search: function() {
      let list = this.buildObj(this.data.currentPage);
      this.setData({
        list: list
      });
    },
    getNextPage: function() {
      let currentPage = this.data.currentPage + 1;
      this.setData({
        currentPage: currentPage,
        list: this.data.list.concat(this.buildObj(currentPage))
      });
    }
  },
  lifetimes: {
    attached: function() {
      this.search();
    }
  }
})

search-list

search-list.js

Component({
  properties: {
    list: Array
  }
})

search-list.wxml

<view wx:for="{{list}}" wx:key="key">
  <view>{{item.value}}-{{item.id}}</view>
</view>

index

Page页，引用搜索头部组件。监听onReachBottom事件，调用组件内的翻页方法。

index.js

Page({
  onReachBottom: function() {
    console.log("onReachBottom");
    this.selectComponent("#page").getNextPage();
  }
})

index.json

{
  "usingComponents": {
    "search": "/component/search-head"}
}

index.wxml

<search id="page"></search>

完整代码