上拉加载

通过pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px；
通过onReachBottom监听到触底的行为

  1. <template>
  2.     <view>
  3.         <view>
  4.             这是列表页面    
  5.         </view>
  6.         <view v-for="(item,index) in list" :key='index'>{{item}}<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></view>
  7.         <button type="default" @click="pullDown">下拉刷新</button>
  8.     </view>
  9. </template>
  11. <script>
  12.     export default {
  13.         data() {
  14.             return {
  15.                 list:['前端','JAVA','UI','测试','大数据']
  16.             }
  17.         },
  18.         onPullDownRefresh() {
  19.             console.log('触发了下拉刷新')
  20.             setTimeout(()=>{
  21.                 this.list = ['JAVA','UI','测试','大数据','前端'] //下拉刷新更新了数据，但是还在不停刷新
  22.                 uni.stopPullDownRefresh()
  23.             },2000)  //加了一个延时2秒        
  24.         },
  26.     //当页面触底了，就进行加载数据
  27.         onReachBottom(){
  28.             console.log('页面触底了')
  29.             this.list = [...this.list,...['JAVA1','UI1','测试1','大数据1','前端1']]
  30.         },
  33.         methods: {
  34.             pullDown(){
  35.                 //点击按钮触发下拉刷新
  36.                 uni.startPullDownRefresh()
  37.             }
  38.         }
  39.     }
  40. </script>
  42. <style>
  44. </style>

触底的距离需要在pages.json中进行了配置，配置如下：

{
    "path" : "pages/list/list",
        "style" :                                                                                    
        {
            "navigationBarTitleText": "这是列表页面",
            "enablePullDownRefresh": true,// 是否开启下拉
            "onReachBottomDistance":200
        }
}

每一次加载的时候，都会加入新的数据！