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