需求：
進入頁面時，沒有導航欄，隨著頁面向上滾動，滾動條透明度逐漸變清晰，最後全部展示出來。
隨著頁面向下滾動，導航欄再逐漸消失
思路：乙個fixed定位的導航欄元件，外部傳入opacity來控制css屬性來控制透明度。
頁面使用時，在onpagescroll裡用throttle防抖方法在滾動時改變opacity
核心**：
// gradient-bar.js
const
= wx.
getsysteminfosync()
;component(,
textcolor:
, sticky:},
data:
,attached()
=this
.data;
this
.setdata()
;}})
;// page裡使用時
page(,
onpagescroll
(evt)
,handlescroll()
let opacity = scrolltop /
scroll_top_offset;if
(scrolltop >
scroll_top_offset
)this
.setdata()
;}})
微信小程式 滾動顯示返回頂部
專案過程中，列表頁過長，產品需求載入兩屏以上才顯示返回頂部的按鈕，直接上 這個案例設定了兩個變數，乙個是滾動條的高度，可能不止乙個頁面會用到返回頂部，所以乙個是全域性的獲取螢幕的高度。內容部分自己定義，不贅述，本例是模擬效果。test.wxml text 內容部分 text view wx if c...
微信小程式 返回頂部功能
wxml js 回到頂部功能 獲取滾動條當前位置 onpagescroll function e else 一鍵回到頂部 gotop function e else 上述 js 中有乙個特別討巧的顯示圖示的方法 icosrc image null.png 如果不加這條語句，使用者隨時隨刻都能看到 回...
微信小程式 回到頂部
回到頂部wx if 是遇 true 顯示，hidden 是遇 false 顯示。他們還有一層細微的區別 wx if 在隱藏的時候不渲染，而 hidden 在隱藏時仍然渲染，只是不呈現。所以如果頻繁切換的話，用 wx if 將會消耗更多資源，因為每次呈現的時候他都會渲染，每次隱藏的時候，他都會銷毀。如...