微信小程式 返回頂部功能

2021-08-22 16:14:27 字數 477 閱讀 9285

wxml **

js **

/** 

* 回到頂部功能

*/// 獲取滾動條當前位置

onpagescroll: function (e) )

}else );}},

// 一鍵回到頂部

gotop: function (e) )

}else )

}},

上述 js 中有乙個特別討巧的顯示圖示的方法 icosrc: "/image/null.png"

如果不加這條語句,使用者隨時隨刻都能看到「回到頂部」的圖示(或者是第一次不顯示,滑到下面,然後再回到頂部,這個圖示還是回存在,這是因為資料還是之前的資料,並那沒有重新整理替換),但是我希望是當使用者往上滑的時候再顯示,到了最頂層就不顯示了

這條語句是意思是,當滾動條到了最頂層就使用乙個透明背景色的圖示來代替他,哈哈

微信小程式 滾動顯示返回頂部

專案過程中,列表頁過長,產品需求載入兩屏以上才顯示返回頂部的按鈕,直接上 這個案例設定了兩個變數,乙個是滾動條的高度,可能不止乙個頁面會用到返回頂部,所以乙個是全域性的獲取螢幕的高度。內容部分自己定義,不贅述,本例是模擬效果。test.wxml text 內容部分 text view wx if c...

微信小程式 回到頂部

回到頂部wx if 是遇 true 顯示,hidden 是遇 false 顯示。他們還有一層細微的區別 wx if 在隱藏的時候不渲染,而 hidden 在隱藏時仍然渲染,只是不呈現。所以如果頻繁切換的話,用 wx if 將會消耗更多資源,因為每次呈現的時候他都會渲染,每次隱藏的時候,他都會銷毀。如...

微信小程式 為什麼上拉載入後會返回頂部

注 下面的 不能直接用,有一些變數沒有貼上來 onreachbottom function 重新整理列表 getgoods function page wx.request method post datatype json success function res 更新頁面資料 that.setd...