小程序學習記錄----滾動頁面加載數據

<scroll-view enable-flex scroll-y @scrolltolower="handleToLower" class="category_tab_content">
           <view class="cate_item"
            v-for="item in vertical"
            :key="item.id">
                <image mode="widthFix" :src="item.thumb"></image>
            </view>
</scroll-view>

scroll-view 爲滑動頁面標籤

屬性：

scroll-y 豎屏滾動

scrolltolower 滾動到底部事件

handleToLower 自定義方法名

enable-flex 滾動不生效 或 生效後頁面錯亂提示需加標籤

注：這裏是圖片滾動加載  ，如果是整體滾動  scroll-view寫在相應的位置標籤

handleToLower(){
            // console.log("出發滾動條");
            /* 
                1 修改參數 skip += limit;
                2 重新發送請求 getList()
                3 請求回來成功 hots 數據的疊加
            */
            if(this.hasMore){
                this.params.skip += this.params.limit;
                this.getList(); 
            } else {
                //彈窗提示用戶
                uni.showToast({
                    title:"暫無數據",
                    icon:"none"
                })
            }
        
        }

上面爲js代碼。

getList爲加載頁面數據代碼封裝

hasMore爲是否有下一頁數據，當沒有時，會在getList封裝方法中把hasMore值改爲false（data公共屬性設置hasMore爲true）

無數據時彈窗提示

注：裏面內容根據自身邏輯進行更改