微信小程序> 微信小程序锚点定位使用教程-小程序锚点定位a1

微信小程序锚点定位使用教程-小程序锚点定位a1

浏览量:2103 时间: 来源:a18025406477
微信小程序锚点定位使用教程

在商品详情页面,一般会有商品图显示、商品主要信息、评价、商品详情等,这时候最好是在最上面加上导航,点击导航定位到对应的页面位置。

工具/原料

1.微信小程序开发工具


问题分析

2.比如在京东的商品详情页面,对于一般的PC端网页,只需要使用<a href=#element_Id>,然后在地址栏最后加上#element_Id,就能很方便的跳转到该元素的位置。


解决思路

3.查找微信小程序的开发文档,发现可以使用scroll-view组件中的属性scroll-into-view实现1.将page的高度设置为100%;2.导航下面的内容部分必须用<scroll-view>包起来3.设置scroll-view的高度=屏幕的高度-导航的高度4.设置scroll-view的属性scroll-into-view={{toView}}5.设置scroll-view的属性scroll-y=true6.设置锚点<view id=position1>


代码部分

4.WXNL

5.JS

6.WXSS


注意事项

7.第4、5步不能换位置,一定是scroll-into-view在scroll-y的前面

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎