this.$router.push如何刷新页面_小程序丨微信小程序如何实现页面下拉刷新
微信小程序蘊(yùn)含著眾多功能,本期將簡單介紹實現(xiàn)頁面下拉刷新的方法,通過閱讀本文,讀者們可以自行動手操作,在實踐中認(rèn)識微信小程序。
首先,我們需在json配置中寫出以下配置:
"enablePullDownRefresh":true
此配置允許小程序做下拉刷新的動作。如果想讓程序中全部頁面都允許下拉刷新,則可以只在app.json中寫。如若想讓局部頁面實現(xiàn)下拉刷新,則需在要實現(xiàn)此功能的頁面的局部頁面配置中寫出(注意這里的true是布爾型而不是字符)。
緊接著,我們在js中寫下:(詳解看注釋)
//下拉刷新
onPullDownRefresh: function() {
????//顯示頂部加載圖標(biāo)
????wx.showNavigationBarLoading(),
????//關(guān)閉所有頁面,跳轉(zhuǎn)頁面
????wx.reLaunch({
????????url:'../home/home',//此路徑僅為例子
????})
????//消息提示框
????wx.showToast({
????????title: ' 努力加載中',
????????icon: "loading"
????});
????//模擬加載時間
????setTimeout(function() {
????????//停止刷新
????????wx.stopPullDownRefresh(),
????????//隱藏消息提示框
????????wx.hideToast(),
????????//隱藏頂部加載圖標(biāo)
????????wx.hideNavigationBarLoading()
????}, 1000);
}
至此就完成了微信小程序下拉刷新功能的實現(xiàn)了(以上是模擬下拉刷新的代碼,如需做到實時刷新頁面數(shù)據(jù),則需獲取動態(tài)數(shù)據(jù))。讀者們也可以通過閱讀官方文檔,在下拉刷新中增添一些交互功能,使用戶體驗更佳。
小程序蘊(yùn)含著眾多功能,若想實現(xiàn)眾多復(fù)雜的功能,則需多多閱讀官方文檔,多多上手實踐,所謂打鐵還需自身硬,過硬的基礎(chǔ)可以使我們在開發(fā)的過程中游刃有余。
本期小程序知識就到這里,我們下周三再見。
文案|韋孫豪
排版|李帝江
審核|郭芳?xì)J
-長按關(guān)注-
總結(jié)
以上是生活随笔為你收集整理的this.$router.push如何刷新页面_小程序丨微信小程序如何实现页面下拉刷新的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux进入mongodb数据库命令,
- 下一篇: 未来教育计算机二级书怎么样,未来教育计算