操作事件函數,主要是將請求下來的數據用concat方法合併,然後賦值,我是用的for循環假裝添加的數據,實際項目中可以換成自己的ajax
需要用到的元件和api
scroll-view(可捲動檢視區域)
wx.showToast(OBJECT)顯示訊息提示視窗- ---顯示loading小菊花用的
需要用到的屬性
#scrol-view需要指定一個高度,這個高度可以依照自己的需求計算,我使用的是螢幕可用高度並且預設一頁顯示6個
#滾動到底部綁定需要觸發的事件
操作事件函數,主要是將請求下來的數據用concat方法進行合併,然後賦值,我是用的for循環假裝添加的數據,實際項目中可以換成自己的ajax,並且為了模擬加載我添加了一個1.5秒的定時器,先呼叫提示框api成功之後關閉
lower() { var result = this.data.res; var resArr = []; //这里可以使用自己的ajax for (let i = 0; i < 10; i++) { resArr.push(i); }; var cont = result.concat(resArr);//合并请求的数据 console.log(resArr.length); if (cont.length >= 100) { wx.showToast({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” title: \'我也是有底线的\', icon: \'success\', duration: 300 }); return false; } else { wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” title: \'加载中\', icon: \'loading\', }); setTimeout(() => { this.setData({ res: cont }); wx.hideLoading(); }, 1500) } }
成功,放完整程式碼可以直接複製執行
js程式碼
Page({ /** * 页面的初始数据 */ data: { height: \'\', res: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }, lower() { var result = this.data.res; var resArr = []; for (let i = 0; i < 10; i++) { resArr.push(i); }; var cont = result.concat(resArr); console.log(resArr.length); if (cont.length >= 100) { wx.showToast({ //如果全部加载完成了也弹一个框 title: \'我也是有底线的\', icon: \'success\', duration: 300 }); return false; } else { wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” title: \'加载中\', icon: \'loading\', }); setTimeout(() => { this.setData({ res: cont }); wx.hideLoading(); }, 1500) } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.getSystemInfo({ success: (res) => { this.setData({ height: res.windowHeight }) } }) } })
推薦:《小程式開發教學課程》
以上是微信小程式實作滾動載入資料的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)