配置pages。json
在uni-app中，頁面滑動到底部可以監聽到onReachBottom（） 方法，如下配置：
// pages。json 檔案中{ “path”： “pages/index”， “style”： { “navigationBarTitleText”： “當前頁面的title”， “navigationStyle”：“custom”， //當前頁面不需要導航 “enablePullDownRefresh”：true， //配置後，可以下拉重新整理，上拉載入 “onReachBottomDistance”：100 }}， // 滑動到距離底部100px的時候觸發（上拉載入） onReachBottom（） { console。log（‘滑動到距離底部100px的時候觸發，可以放 。。業務邏輯’）； }， //下拉執行的時候觸發 （下拉重新整理） onPullDownRefresh （） { //放要執行的動作。。。。 wx。stopPullDownRefresh（） //停止下拉重新整理效果的api，如果發現進入重新整理狀態無法停止，可以用這個 }，
獲取資料
思路：在頁面載入的時候，會先請求10條資料，然後使用者滑動到頁面底部，繼續載入11-20條資料，以此類推。
data（） {//變數配置處 return { hots： ［］， //活動資料列表 params：{ limit： 10，//預設每次請求10條 start： 0， }， //是否還有下一頁，即是否還有資料 hasMore： true， dataEnd：false， //資料載入完了 }}， // 頁面生命週期方法之onloadonLoad： function （option） { this。getList（）；//頁面載入獲取前10條資料 }， //頁面滑動到底部觸發的方法之onReachBottom onReachBottom（）{ this。handleTolower（）；//滑動到底部載入 }， // methods 裡面放方法 methods：{ // 獲取介面資料——因為會反覆執行，封裝在這裡 getList（） { uni。showLoading（{ title：“載入中” //為了網路慢，給使用者的友好等待提示 }）； //進行介面資料請求 uni。request（{ url： getApp（）。globalData。url+“list”，//地址 method：“POST”，//方式 data： this。params，//引數 success： （result） => { if （result。data。data。length === 0） { this。hasMore = false； this。dataEnd=true return； } //資料拼接 this。hots = ［。。。this。hots， 。。。result。data。data］ }， complete（）{ uni。hideLoading（）； //loading 彈窗end } }） }，//getList（） 方法end //觸底請求的方法，就是修改引數 handleTolower（） { // 1、修改引數 skip +=limit 2、重新發送請求 3、資料疊加 if （this。hasMore） { this。params。start += this。params。limit； this。getList（）； } else { // 彈窗形式或者其他形式告訴使用者沒有資料了 this。dataEnd=true } }// handleTolower（） end }
