国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序 錨點(diǎn)的實(shí)現(xiàn) 計(jì)算高度法

Kyxy / 1552人閱讀

摘要：背景最近在開(kāi)發(fā)小程序的時(shí)候，遇到一個(gè)在頁(yè)面上做錨點(diǎn)的需求查閱了一下，小程序的錨點(diǎn)和瀏覽器中的錨點(diǎn)是不一樣的，所以不能用標(biāo)簽加錨點(diǎn)來(lái)實(shí)現(xiàn)實(shí)現(xiàn)通常，在小程序中，可以用標(biāo)簽的屬性進(jìn)行跳轉(zhuǎn)，這是網(wǎng)上常見(jiàn)的方法，具體方法，就不詳細(xì)說(shuō)了，可以參

背景

最近在開(kāi)發(fā)小程序的時(shí)候，遇到一個(gè)在頁(yè)面上做錨點(diǎn)的需求

查閱了一下，小程序的錨點(diǎn)和瀏覽器中html的錨點(diǎn)是不一樣的，所以不能用 a 標(biāo)簽加 #錨點(diǎn) 來(lái)實(shí)現(xiàn)

scroll-view實(shí)現(xiàn)

通常，在小程序中，可以用scroll-view標(biāo)簽的scroll-into-view屬性進(jìn)行跳轉(zhuǎn)，這是網(wǎng)上常見(jiàn)的方法，具體方法，就不詳細(xì)說(shuō)了，可以參考這篇文章 微信小程序-錨點(diǎn)定位

但是scroll-view實(shí)現(xiàn)的錨點(diǎn)有一些缺點(diǎn)：

使用了scroll-view，就不能使用頁(yè)面的下拉刷新 onpulldownrefresh，scroll-view 使用提示

計(jì)算高度實(shí)現(xiàn)

這個(gè)方法的基本思路是：計(jì)算出錨點(diǎn)相對(duì)于頁(yè)面的高度，使用wx.pageScrollTo滾動(dòng)到錨點(diǎn)位置

具體方法如下：

首先，計(jì)算出錨點(diǎn)元素相對(duì)于當(dāng)前可視區(qū)域的高度，即元素和小程序title的距離，文檔 wx.createSelectorQuery，fields

wx.createSelectorQuery().select("#anchor").fields({
    rect: true
}, function (res) {
    a = res.top
}

然后，計(jì)算出當(dāng)前頁(yè)面滾動(dòng)的高度，即html中的scrollTop，即頁(yè)面元素頂部距離小程序title的距離，文檔 scrollOffset

wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
    b = res.scrollTop
})

最后，使用wx.pageScrollTo滾動(dòng)到錨點(diǎn)位置，文檔 wx.pageScrollTo

wx.pageScrollTo({
    scrollTop: a + b
});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/54199.html

相關(guān)文章

  • 微信小程序開(kāi)發(fā)-個(gè)人總結(jié)

    微信小程序開(kāi)發(fā)總結(jié) 基礎(chǔ)的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說(shuō)一下自己的經(jīng)驗(yàn)總結(jié) 提醒 微信小程序不運(yùn)行在瀏覽器，所以不能操作Dom，也沒(méi)有document、window對(duì)象 每一個(gè)頁(yè)面路徑最多五層 eg：頁(yè)面A->頁(yè)面B->頁(yè)面C->頁(yè)面D->頁(yè)面E->（頁(yè)面F是跳轉(zhuǎn)不出來(lái)的） 注：不經(jīng)過(guò)redirect，redirect后的頁(yè)面算是第一層，但是沒(méi)有-返回-按鈕...

    FrancisSoung 評(píng)論0 收藏0

  • 微信小程序開(kāi)發(fā)-個(gè)人總結(jié)

    微信小程序開(kāi)發(fā)總結(jié) 基礎(chǔ)的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說(shuō)一下自己的經(jīng)驗(yàn)總結(jié) 提醒 微信小程序不運(yùn)行在瀏覽器，所以不能操作Dom，也沒(méi)有document、window對(duì)象 每一個(gè)頁(yè)面路徑最多五層 eg：頁(yè)面A->頁(yè)面B->頁(yè)面C->頁(yè)面D->頁(yè)面E->（頁(yè)面F是跳轉(zhuǎn)不出來(lái)的） 注：不經(jīng)過(guò)redirect，redirect后的頁(yè)面算是第一層，但是沒(méi)有-返回-按鈕...

    derek_334892 評(píng)論0 收藏0

  • 微信小程序開(kāi)發(fā)-個(gè)人總結(jié)

    微信小程序開(kāi)發(fā)總結(jié) 基礎(chǔ)的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說(shuō)一下自己的經(jīng)驗(yàn)總結(jié) 提醒 微信小程序不運(yùn)行在瀏覽器，所以不能操作Dom，也沒(méi)有document、window對(duì)象 每一個(gè)頁(yè)面路徑最多五層 eg：頁(yè)面A->頁(yè)面B->頁(yè)面C->頁(yè)面D->頁(yè)面E->（頁(yè)面F是跳轉(zhuǎn)不出來(lái)的） 注：不經(jīng)過(guò)redirect，redirect后的頁(yè)面算是第一層，但是沒(méi)有-返回-按鈕...

    philadelphia 評(píng)論0 收藏0

  • 原生js實(shí)現(xiàn)瀑布流及微信小程序中使用左右兩列實(shí)現(xiàn)瀑布流

    摘要：使用實(shí)現(xiàn)瀑布流并不實(shí)用，因?yàn)閷?shí)現(xiàn)的瀑布流都是以列來(lái)排列的，這里記錄下用實(shí)現(xiàn)瀑布流，以及微信小程序中使用左右兩列來(lái)實(shí)現(xiàn)瀑布流效果圖原生實(shí)現(xiàn)瀑布流文件圖片可以自己找點(diǎn)替換下就可以了文件添加陰影的時(shí)候，加上會(huì)顯得更加有點(diǎn)懸浮感文件計(jì)算圖片列數(shù) 使用css實(shí)現(xiàn)瀑布流并不實(shí)用，因?yàn)閏ss實(shí)現(xiàn)的瀑布流都是以列來(lái)排列的，這里記錄下用js實(shí)現(xiàn)瀑布流，以及微信小程序中使用左右兩列來(lái)實(shí)現(xiàn)瀑布流 1.效果圖...

    imingyu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<