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

 时间:2024-10-12 16:05:20

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

工具/原料

微信小程序开发工具

问题分析

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

解决思路

1、查找微信小程序的开发文档,发现可以使用scroll-view组件中的属性scroll-into-view实现

2、訇咀喃谆将page的高度设置为100%;2.导航下面的内容部分必须用<scroll-view>包起来3.设置scroll-view的高度=屏幕的高度-导航的高度4.设就女蒿鸳置scroll-view的属性scroll-into-view="{{toView}}"5.设置scroll-view的属性scroll-y="true"6.设置锚点<view id="position1">

代码部分

1、WXNL

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

2、JS

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

3、WXSS

微信小程序锚点定位使用教程
  • Discuz论坛后台电子商务如何开通和设置?
  • 如何查看企鹅号所属领域
  • 剪映专业版给视频添加卡点音乐的方法是什么呢?
  • 头发里隐藏领夹麦克风的方法
  • 蚁小二一键分发工具使用说明
  • 热门搜索
    关于国庆节的手抄报 手抄报大全简单又漂亮 节约粮食手抄报简单又漂亮 名人名言手抄报 从小学先锋长大做先锋手抄报 文明手抄报内容 童心向党手抄报图 感恩的心手抄报 清明节手抄报大全图片 禁毒手抄报图片