前幾天分享了乙個自己做的關於小程式元件擴充套件的開源專案
本來就是想給自己發布的第乙個開源**騙騙star，結果有不少善良的朋友給文章點讚了，搞得我有點不好意思，所以決定寫點乾貨講講具體是怎麼實現的。
其實也比較簡單，首先自定義元件下的 scroll-view 高度設為比元件本身高出 40px，即頭部顯示重新整理文字的區域高度，然後讓 scroll-view y軸偏移 -40px，這樣重新整理文字區域就在頂部看不到了，具體css如下：
然後就是監聽 scroll-view 的 onscroll 事件，這裡我將下拉重新整理的狀態分為五種：
那麼在事件監聽中根據當前的 scrolltop 來判斷應該在哪一種狀態：
問題來了，什麼時候重新整理呢？小程式的 scroll-view 並沒有 onscrollend 這種事件，於是我想到了 ontouchend，畢竟在手機上也只能用觸控來滑動（點選頭部返回頂部除外），所以只需要在 ontouchend 事件中監聽如果當前的下拉狀態是2（_pulldownstatusdic.release）即鬆開可重新整理時，就觸發重新整理：
當然這個時候還有個問題，我們需要把重新整理文字局域顯示出來，我們是沒辦法吧乙個 scroll-view 的 scrolltop 設為負數的，所以只能將 scroll-view 的y軸偏移取消來解決（產生的問題就是鬆手時會有一下彈動，後期會想辦法進行優化）
完成重新整理後，再將 scroll-view 的y軸偏移通過css動畫再變回 -40px（用 translate 而不用 margin 就是為了此處動畫的流暢度），這樣就完成了一次下拉重新整理。
微信小程式 scroll view元件
scroll view為滾動檢視，分為水平滾動和垂直滾動。注意滾動檢視垂直滾動時一定要設定高度否則的話scroll view不會生效。滾動檢視常用的地方一般都是item項比較多的介面，比如我的模組 主要屬性 使用演示 wxml scroll y true style height 200px sty...
小程式scroll view實現左右聯動
wxml js data scroll function e 通過繫結事件scroll,每次單擊獲取對應元素的id,再將其繫結到intoindex上,此處是將intoindex接下來顯示的內容要跳轉到的位置,即id content 處,由於官方規定id不能以數字開頭,所以intoindex前面加上了...
微信小程式 scroll view下拉重新整理
需求描述 1.首先我的scroll view部分是巢狀在template內 2.應用template的頁面頂部還有乙個日期選擇picker且位置固定 3.下拉重新整理當前頁面 重新整理請求 utils news.getnews function result settimeout function ...