我在寫頁面的時候，遇到一個問題，點擊不同的按鈕，跳轉到不同的區域，這個怎么 實現呢？一開始我用了計算的方式，推理出公式，按照ilphone6的標準，功能實現了。

我本來以為沒有問題了，結果換了一個手機，變成了iPhone5，又不對了。因為在wxml中，設置的元素的具體尺寸不同設備有不同的換算比例，那么就不能用具體的公式定義，

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

如何實現呢？

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

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

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

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

<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}}} })

?

轉載于:https://www.cnblogs.com/good-qinqin/p/9117385.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。