（七）scroll-view 下拉加载

html: 

<view>
  <!-- 
    下拉加载
    1. lower-threshold 距底部触发的阀值
    2. bindscrolltolower 触发函数
  -->
  <view class="box">
    <scroll-view
      class="wrapper"
      scroll-y
      lower-threshold="{{ 20 }}"
      bindscrolltolower="scrollLower"
    >
      <view
        class='block'
        wx:for="{{ dataList}}"
        style="background: {{ item.background }}"
        wx:key="index"
      >{{ item.name }}</view>
      <view class='loading' wx:if="{{ isLoading }}">加载中...</view>
    </scroll-view>
  </view>
</view>

js: 

Page({
  data: {
    timer: null,
    dataList: [{
      background: 'red',
      name: 'A'
    },
    {
      background: 'green',
      name: 'B'
    },
    {
      background: 'yellow',
      name: 'C'
    }],
    secondList: [{
      background: 'pink',
      name: 'D'
    }, {
      background: 'lightblue',
      name: 'E'
    }, {
      background: 'lightgreen',
      name: 'F'
    }],
    isLoading: false
  },
  scrollLower () {
    this.setData({
      isLoading: true,
      timer: setTimeout(() => {
        this.setData({
          dataList: [...this.data.dataList, ...this.data.secondList],
          isLoading: false
        })
        clearTimeout(this.data.timer)
      }, 3000)
    })
  }
})

css：

.block {
  height: 350px;
}

.wrapper {
  height: 500px;
  border: 1px solid black;
}

.loading {
  font-size: 16px;
  color: #ccc;
  margin: 10px auto;
  width: 100px;
}

1. 在这个demo中使用了 wx:for 循环，wx:for 后面传入数组，默认每一项是item 取值直接 item.xx 就可以，不需要 像vue一样，自己取每个名字，如 item, elem 等

2. 数组也是每个项都需要一个 key

3. 还有小程序 内联样式的使用

推荐一个插件：https://opendocs.alipay.com/mini/component-ext/vtabs 

vtabs 很常见的一种效果 马一下