我在寫頁面的時候，遇到一個問題，點(diǎn)擊不同的按鈕，跳轉(zhuǎn)到不同的區(qū)域，這個怎么 實(shí)現(xiàn)呢？一開始我用了計(jì)算的方式，推理出公式，按照ilphone6的標(biāo)準(zhǔn)，功能實(shí)現(xiàn)了。

我本來以為沒有問題了，結(jié)果換了一個手機(jī)，變成了iPhone5，又不對了。因?yàn)樵趙xml中，設(shè)置的元素的具體尺寸不同設(shè)備有不同的換算比例，那么就不能用具體的公式定義，

后來，我研究了小程序組件scroll-view。發(fā)現(xiàn)如果用這個組件，剛才的所有都不是問題。

如何實(shí)現(xiàn)呢？

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

這是小程序文檔中關(guān)于scroll-view的介紹。這里面有一個屬性：scroll-into-view

咋看之下，沒感覺什么，但是細(xì)細(xì)分析，我們發(fā)現(xiàn)這個屬性可以定位到某個元素的id，那么我們只要給我要找到的元素加上指定的id，用這個屬性定位過去，不是就可以做了嗎？

而且官方文檔也提供了案例，我按照官網(wǎng)的案例，找到了問題的解決方案，下面我把這個案例呈現(xiàn)出來：

<view class="section"><view class="section__title">vertical scroll</view><scroll-view scroll-y style="height: 200px;" scroll-into-view="{{toView}}" ><view id="green" class="scroll-view-item bc_green"></view><view id="red" class="scroll-view-item bc_red"></view><view id="yellow" class="scroll-view-item bc_yellow"></view><view id="blue" class="scroll-view-item bc_blue"></view></scroll-view><view class="btn-area"><button size="mini" bindtap="tap">click me to scroll into view </button></view> </view> var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({data: {toView: 'red',},tap: function(e) {for (var i = 0; i < order.length; ++i) {if (order[i] === this.data.toView) {this.setData({toView: order[i + 1]})break}}} })

?

轉(zhuǎn)載于:https://www.cnblogs.com/good-qinqin/p/9117385.html

總結(jié)

以上是生活随笔為你收集整理的小程序之点击跳转到对应内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。