小程序之点击跳转到对应内容

我在写页面的时候，遇到一个问题，点击不同的按钮，跳转到不同的区域，这个怎么 实现呢？一开始我用了计算的方式，推理出公式，按照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

总结

以上是生活随笔为你收集整理的小程序之点击跳转到对应内容的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。