微信小程序锚点定位教程
引言：在商品详情页面，一般会有商品图显示、商品主要信息、评价、商品详情等，这时候最好是在最上面加上导航，点击导航定位到对应的页面位置，比如京东的商品详情页面
对于一般的PC端网页，只需要使用，然后在地址栏最后加上#element_Id，就能很方便的跳转到该元素的位置。
那么，微信小程序该怎样解决呢?
解决思路
查找微信小程序的开发文档，发现可以使用scroll-view组件中的属性scroll-into-view实现
重点
将page的高度设置为100%;
导航下面的内容部分必须用包起来
设置scroll-view的高度=屏幕的高度-导航的高度
设置scroll-view的属性scroll-into-view="{{toView}}"
设置scroll-view的属性scroll-y="true"
设置锚点
注意：第4、5步不能换位置，一定是scroll-into-view在scroll-y的前面
JS
data = {
winHeight: '100%',
toView: 'productBox',//锚点跳转的ID
}
onLoad(){
let that = this;
wx.getSystemInfo({
success: function (res) {
//屏幕的宽度/屏幕的高度 = 微信固定宽度(750)/微信高度
that.winHeight = res.windowHeight-(res.windowWidth*90/750)+'px';//90为导航的告诉80+10(margin-bottom)
}
});
}
methods = {
toViewClick: function (e) {
this.toView = e.target.dataset.hash;
}
}
复制代码
WXSS
- 上一篇：小程序从手动埋点到自动埋点教程
- 下一篇：Mysql事务隔离解析
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻