資訊專欄INFORMATION COLUMN
摘要：背景最近在開發小程序的時候，遇到一個在頁面上做錨點的需求查閱了一下，小程序的錨點和瀏覽器中的錨點是不一樣的，所以不能用標簽加錨點來實現實現通常，在小程序中，可以用標簽的屬性進行跳轉，這是網上常見的方法，具體方法，就不詳細說了，可以參
背景
最近在開發小程序的時候，遇到一個在頁面上做錨點的需求
查閱了一下，小程序的錨點和瀏覽器中html的錨點是不一樣的，所以不能用 a 標簽加 #錨點 來實現
scroll-view實現通常，在小程序中，可以用scroll-view標簽的scroll-into-view屬性進行跳轉，這是網上常見的方法，具體方法，就不詳細說了，可以參考這篇文章 微信小程序-錨點定位
但是scroll-view實現的錨點有一些缺點：
使用了scroll-view，就不能使用頁面的下拉刷新 onpulldownrefresh，scroll-view 使用提示
計算高度實現這個方法的基本思路是：計算出錨點相對于頁面的高度，使用wx.pageScrollTo滾動到錨點位置
具體方法如下：
首先，計算出錨點元素相對于當前可視區域的高度，即元素和小程序title的距離，文檔 wx.createSelectorQuery，fields
wx.createSelectorQuery().select("#anchor").fields({
rect: true
}, function (res) {
a = res.top
}
然后，計算出當前頁面滾動的高度，即html中的scrollTop，即頁面元素頂部距離小程序title的距離，文檔 scrollOffset
wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
b = res.scrollTop
})
最后，使用wx.pageScrollTo滾動到錨點位置，文檔 wx.pageScrollTo
wx.pageScrollTo({
scrollTop: a + b
});
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54199.html
微信小程序開發總結 基礎的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說一下自己的經驗總結 提醒 微信小程序不運行在瀏覽器，所以不能操作Dom，也沒有document、window對象 每一個頁面路徑最多五層 eg：頁面A->頁面B->頁面C->頁面D->頁面E->（頁面F是跳轉不出來的） 注：不經過redirect，redirect后的頁面算是第一層，但是沒有-返回-按鈕...
微信小程序開發總結 基礎的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說一下自己的經驗總結 提醒 微信小程序不運行在瀏覽器，所以不能操作Dom，也沒有document、window對象 每一個頁面路徑最多五層 eg：頁面A->頁面B->頁面C->頁面D->頁面E->（頁面F是跳轉不出來的） 注：不經過redirect，redirect后的頁面算是第一層，但是沒有-返回-按鈕...
微信小程序開發總結 基礎的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說一下自己的經驗總結 提醒 微信小程序不運行在瀏覽器，所以不能操作Dom，也沒有document、window對象 每一個頁面路徑最多五層 eg：頁面A->頁面B->頁面C->頁面D->頁面E->（頁面F是跳轉不出來的） 注：不經過redirect，redirect后的頁面算是第一層，但是沒有-返回-按鈕...
摘要：使用實現瀑布流并不實用，因為實現的瀑布流都是以列來排列的，這里記錄下用實現瀑布流，以及微信小程序中使用左右兩列來實現瀑布流效果圖原生實現瀑布流文件圖片可以自己找點替換下就可以了文件添加陰影的時候，加上會顯得更加有點懸浮感文件計算圖片列數 使用css實現瀑布流并不實用，因為css實現的瀑布流都是以列來排列的，這里記錄下用js實現瀑布流，以及微信小程序中使用左右兩列來實現瀑布流 1.效果圖...
閱讀 2107·2021-11-05 09:42
閱讀 2851·2021-09-23 11:21
閱讀 2841·2019-08-30 14:00
閱讀 3314·2019-08-30 13:15
閱讀 465·2019-08-29 17:18
閱讀 3547·2019-08-29 16:29
閱讀 2749·2019-08-29 14:06
閱讀 2794·2019-08-23 14:41
