2. 程式人生 > >微信小程式頁面重新整理,下拉重新整理

微信小程式頁面重新整理,下拉重新整理

阿新 • • 發佈：2019-01-06

最近做專案的時候略微研究了一下微信小程式的頁面重新整理機制.

微信小程式的重新整理類似於Ajax的重新整理,可以通過setData實現部分頁面的重新整理,並不需要onLoad頁面.

當然,微信小程式並沒有類似於網頁或者Android的頁面過載方法.

重新整理頁面只能通過setData或者使用官方提供的下拉重新整理.

1.使用setData

this.setData({ shop_list: new_shop_list })

2.使用下拉重新整理

a.首先在index.json裡設定

{ //開啟下拉重新整理   "enablePullDownRefresh": true,  //設定頁面顏色(設定顏色才可以看到下拉重新整理的動畫效果)  
"backgroundTextStyle": "dark"}

b.在index.js中的onPullDownRefresh 方法中寫重新整理的邏輯程式碼

/** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () {    //當邏輯執行完後關閉重新整理        wx.stopPullDownRefresh() },

c.效果實現


相關推薦

微信小程式實戰篇-下拉重新整理與載入更多

下拉重新整理 實現下拉重新整理目前能想到的有兩種方式 呼叫系統的API，系統有提供下拉重新整理的API介面   下拉重新整理API.png 監聽scroll-view,自定義下拉重新整理，還記得scroll-view裡面有一個bindscrollto

微信小程式-自定義下拉重新整理

最近給別個公司做技術支援，要實現微信小程式上拉重新整理與下拉載入更多 微信給出的介面不怎麼友好，最終想實現效果類似QQ手機版 ，一共3種下拉重新整理狀態變化，文字+圖片+背景顏色 最終實現後的效果(這裡提示有個不同點就是，自定義了導航條，並且下拉的時候，自定義導航條必須固定） 小程式實現下拉載入2種方

微信小程式如何實現下拉框效果？（程式碼示例）

wxml程式碼： <view class='top-text'> 選擇接收班級</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <

微信小程式頁面重新整理,下拉重新整理

最近做專案的時候略微研究了一下微信小程式的頁面重新整理機制.微信小程式的重新整理類似於Ajax的重新整理,可以通過setData實現部分頁面的重新整理,並不需要onLoad頁面.當然,微信小程式並沒有類似於網頁或者Android的頁面過載方法.重新整理頁面只能通過setDat

微信小程式頁面左右滑動與上下拉重新整理的實現方案

關於上下拉重新整理 微信小程式官方建議使用page的上下拉重新整理，那麼什麼時候會觸發上下拉重新整理呢 page頁面上下拉重新整理 下拉 通過向下滑動頁面即可觸發page頁面的onPullDownRefresh方法 上滑 上滑的觸

直擊根源：vue專案微信小程式頁面跳轉web-view不重新整理

背景 最近專案需要適配小程式，專案是使用了vue開發的網站，其中改造方式是，每個頁面都使用小程式建立一個頁面通過web-view來顯示指定頁面的。 在沒有使用小程式時，路由跳轉時，重新整理頁面等等，這個是很順暢的，在使用了小程式之後，需要適配小程式的頁面，比如後退到前一頁，這個時候要重新整理頁面，於是遇到了小

直擊根源：微信小程式中web-view再次重新整理後頁面需要退兩次

背景 在上一章(直擊根源：vue專案微信小程式頁面跳轉web-view不重新整理)解決了vue在小程式回退不重新整理的問題之後，會引出了一個重新整理的頁面需要點選返回兩次才能返回上一個頁面 問題描述 在A頁面從B頁面帶了引數返回之後，A頁面會重新整理，直接導致了，A頁面返回上一個頁面需要點選兩次，其中點

微信小程序-ios系統-下拉上拉出現白色，如何處理呢？

esc 測試 固定 操作 進行 col 安卓 上下滾動 inf 這幾天做小程序，有些頁面都是全屏的背景，在安卓上背景是固定的，而在ios上上拉下拉出現白色，測試說體驗不太好，一開始我以為是下拉上拉刷新造成的，關閉了依然是這樣。為了體驗好點，可以按一下解決： 方式一： 　　可

微信公眾號和微信瀏覽器中網頁實現下拉重新整理

原生JS實現微信公眾號或網頁使用下拉載入和上拉重新整理 微信瀏覽器開啟網頁顯示網址安全資訊，導致下拉重新整理用不了。解決辦法,網上很多辦法，也找了很久，但是最新的很多用不了。 後來自己根據網上的一些資料，造了個輪子。先看看效果，是不是親想要的，可以跳過，以免浪費寶貴時間。用微信開啟以下網址瀏

抓取微信小程式頁面丶小程式原始碼

使用TBS爬取微信小程式頁面 轉載來源：https://my.oschina.net/sumiao/blog/1587350?utm_source=debugrun&utm_medium=referral 獲取任何微信小程式原始碼 轉載來源：https://blog.csdn.n

微信小程式 —— 頁面傳值

小程式頁面傳值的方式： 1.正向傳值：上一頁面 -->  下一頁面 url傳值 本地儲存 全域性的app物件 2.反向傳值：下一頁面 -->  上一頁面 本地儲存 全域性的app物件 先說一下正向傳值： 1.url傳值：  

微信小程式-day03-註冊頁面、路由（微信小程式頁面跳轉）、模組化

1.路由 wx.navigateTo    開啟新頁面 wx.redirectTo      頁面重定向 wx.switchTab      切換 Tab

微信小程式 頁面跳轉及資料傳遞詳解

微信小程式 頁面跳轉及資料傳遞詳解 類似 Android 的 Intent 傳值，微信小程式也一樣可以傳值： 例如：wxml 中寫了一個函式跳轉： ? 1 2 3 4 <view class="itemWeight" catchtap

微信小程式--頁面傳參

場景：   A頁面欄位---傳遞到-->B頁面   A頁面wxml:   wx:for----習慣用<block> 設定所點選的值----data-xxx 獲取所點選的值---e.currentTarget.dataset.xxx wx:for

微信小程式-scroll-view上拉多次觸發載入事件

之前那篇部落格裡邊寫了滑塊的margin屬性影響了滑動效果。這篇文章寫一下上拉時多次觸發上拉載入事件。 （改好的程式碼如下） 其實也比較簡單，就是有可能沒有意識到這個小細節。在官方文件中有這麼一個屬性（如圖）。這個屬性是設定距離底部多少距離是觸發事件。我們吧這個屬性設定成0就可以了。只有上拉到最

微信小程式-頁面間值傳遞的2種方法

一：url帶引數傳遞           與前端語言一樣，小程式頁面間的傳遞可以通過在路由url後接引數，路由的同時會將引數一併傳遞到新的頁面。 index.wxml: <!--index.wxml--> <view c

小程式自定義下拉重新整理

自定義元件： js: // components/test/test.js Component({ /** * 元件的屬性列表 */ properties: { }, /** * 元件的初始資料 */ data: { scrollHeight

微信小程式 頁面渲染新手入門總結

新手入門，大神勿噴。。。。 渲染小程式的前端頁面入門步驟（非雲開發專案） 1.進入官網註冊appId並且下載微信開發者工具 2.進入開發者工具後點擊app.json檔案，在pages欄位下新建頁面（此處新建頁面會自動生成所需的四種檔案，比較方便） 3.在Wec

微信小程式頁面傳值的方式

假設把A頁面的值傳給B頁面： 首先是A頁面傳值相關的： 頁面設計： <view class='content' wx:for='{{menuList}}' wx:for-index="parentIndex"> <view class='item' data-p

微信小程式頁面跳轉方法總結

微信小程式頁面跳轉目前有以下方法（不全面的歡迎補充）： 1. 利用小程式提供的 API 跳轉： // 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。 //