小程序之点击跳转到对应内容
Posted Qin棒棒哒
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序之点击跳转到对应内容相关的知识,希望对你有一定的参考价值。
我在写页面的时候,遇到一个问题,点击不同的按钮,跳转到不同的区域,这个怎么 实现呢?一开始我用了计算的方式,推理出公式,按照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 } } } })
以上是关于小程序之点击跳转到对应内容的主要内容,如果未能解决你的问题,请参考以下文章