欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序頁(yè)面自動(dòng)滾動(dòng)到指定位置 - 新聞資訊 - 云南小程序開(kāi)發(fā)|云南軟件開(kāi)發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開(kāi)發(fā)/軟件開(kāi)發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X(jué)表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營(yíng)銷的便利，運(yùn)營(yíng)的高效，讓網(wǎng)站成為營(yíng)銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >

微信小程序頁(yè)面自動(dòng)滾動(dòng)到指定位置

發(fā)表時(shí)間：2021-1-4

發(fā)布人：葵宇科技

瀏覽次數(shù)：97

我們有時(shí)會(huì)需要讓頁(yè)面自動(dòng)滾動(dòng)到某個(gè)位置（比如點(diǎn)擊頂部的目錄，滾動(dòng)到下面對(duì)應(yīng)內(nèi)容的位置），那么在小程序中我們應(yīng)該怎么做呢？

做法

1.使用wx.createSelectorQuery().select().boundingClientRect()查詢到需要滾動(dòng)到的元素位置
2.使用wx.pageScrollTo()將頁(yè)面滾動(dòng)到對(duì)應(yīng)位置
復(fù)制代碼

官方文檔wx.createSelectorQuery() 官方文檔wx.pageScrollTo()

scrollTo() {
	// 1.使用wx.createSelectorQuery()查詢到需要滾動(dòng)到的元素位置
	wx.createSelectorQuery().select('.bb4').boundingClientRect(res => {
	  // 到這里，我們可以從res中讀到class為bb4的top，即離頂部的距離（px）
	  // 2使用wx.pageScrollTo()將頁(yè)面滾動(dòng)到對(duì)應(yīng)位置
	  wx.pageScrollTo({
	    scrollTop: res.top, // 滾動(dòng)到的位置（距離頂部 px）
	    duration: 0 //滾動(dòng)所需時(shí)間 如果不需要滾動(dòng)過(guò)渡動(dòng)畫(huà)，設(shè)為0（ms）
	  })
	}).exec()
}
復(fù)制代碼

簡(jiǎn)單！

擴(kuò)展一下下

上面的方法搞定之后試一下我們就知道，那是把目標(biāo)位置滾動(dòng)到頁(yè)面頂端的。那么如果我們想要目標(biāo)位置在屏幕中間呢？其實(shí)就是在上面拿到元素距離頂部的距離的基礎(chǔ)上減去頁(yè)面的高度的一半。

scrollTo() {
	// 1.使用wx.createSelectorQuery()查詢到需要滾動(dòng)到的元素位置
	wx.createSelectorQuery().select('.bb4').boundingClientRect(res => {
         // 2.使用wx.getSysTemInfo()獲取設(shè)備及頁(yè)面高度windowHeight（px）
            wx.getSystemInfo({
                success(ress) {
                  wx.pageScrollTo({
                  	// 3. 滾動(dòng)的距離根據(jù)設(shè)備的頁(yè)面高度進(jìn)行微調(diào)（px）
                    scrollTop: res.top - ress.windowHeight/2 + 50,
                    duration: 200
                  })
                }
          })
        }).exec()
}