微信小程序页内锚链接跳转效果

思路逻辑
利用 wx.createSelectorQuery()方法获取所有mao点距离页面顶部的距离并组成数组，
点击目录触发goMao()方法并传递当前点击的index，
查找数组第index个的top然后利用wx.pageScrollTo({ scrollTop: goH })跳转
代码如下

<!-- wxml --><!-- 目录 -->
<view  bindtap="goMao"  data-index="0">项目一</view>
<view  bindtap="goMao"  data-index="1">项目二</view>
<view  bindtap="goMao"  data-index="2">项目三</view><!-- 内容-->
<view class="y_mao"></view>
<view class="y_mao"></view>
<view class="y_mao"></view>

//js
Page({data:{maoHeightArr:[],//锚链接跳转高度},onLoad(options) {this.getTap();},getTap(){let that = this;const SelectorQuery = wx.createSelectorQuery();SelectorQuery.selectAll('.y_mao').boundingClientRect();SelectorQuery.exec(res=>{let swiperitemsH = [];res[0].forEach((item,index)=>{swiperitemsH.push(item.top);});this.setData({maoHeightArr:swiperitemsH})})},//点击跳转goMao(e){let index = e.currentTarget.dataset.index;let goH = this.data.maoHeightArr[index];wx.pageScrollTo({ scrollTop: goH })},})

微信小程序页内锚链接跳转效果相关推荐

【微信】微信小程序应用内的页面跳转在添加了tab以后就跳转不成功的问题解决...
在微信小程序中,本来应用页面内绑定在按钮上跳转页面可以成功,但是将页面添加在tab以后就不能实现跳转了原本代码如下: //事件处理函数bindViewTap: function() {wx.navi ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()...
微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo()- 文章目录微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo( ...
【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替前言代码效果图前言张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...
微信小程序与内嵌网页交互实现支付功能
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究, ...
微信小程序携带参数的页面跳转
日常我们在手机app购物的时候,点击app主页琳琅满目的商品,就会跳转到商品的具体页面. 无论我们点击哪个商品,跳转到商品具体页面的布局都是一样的,但页面内的数据不一样,比如说商品名称,图片等等不一样 ...
微信小程序和H5之间互相跳转、互相传值
最近又开始写小程序了,刚好遇到微信小程序和内嵌 H5 之间来回跳转,来回交互:这里记录一下微信小程序和 H5 之间交互的实现:(我的小程序是通过 un-app 框架来写的,内部代码基本都是 vue) ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...

微信小程序页内锚链接跳转效果

微信小程序页内锚链接跳转效果相关推荐

最新文章

热门文章