小程序采用Scroll-view实现瞄点,不兼容input标签解决方法
1、原来采用的方法
上述为了测试scroll-view与input在安卓端不兼容,实验测试确实是不兼容。
2、采用scroll-view实现瞄点的方法
<scroll-view style="height:100%" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="{{true}}">
<view id="test1">111111</view>
<view id="test2">111111</view>
<view id="test3">111111</view>
</scroll-view>
that.setData({
toView: jump
});
这里jump为对应项的id值,这里可设置为test1 test2..
必须保证scroll-view高度存在;实现瞄点页面内容必须满足大于整屏
3、这里说一下如何解决页面实现瞄点并且页面需要使用到input标签。
if (jump) {
//1:返回一个残血对象的实例
const query = wx.createSelectorQuery();
//【point1】指的是要跳转的id选择器元素
//2:在当前页面下查询指定id选择器的节点,获取节点信息
query.select('#' + jump).boundingClientRect();
//3:可用于获取显示区域的尺寸、滚动位置等信息,然后添加截图的滚动位置查询请求
query.selectViewport().scrollOffset();
//4:开始执行
query.exec((res) => {
//res[0]是步骤2中的数据,res[1]是步骤3中的数据
if (res[0] && res[1]) {
//5:将页面滚动到目标位置
wx.pageScrollTo({
//6:计算滚动到目标的位置
scrollTop: res[0].top + res[1].scrollTop,
duration: 300,
})
}
});
}
采用这种方法解决,不是用scroll-view实现瞄点,jump为动态的id值。测试Android与iphone均可实现。