（七）scroll-view 下拉加载

html: 

  
  
    
      {{ item.name }}
      加载中...
    
  

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 很常见的一种效果 马一下