微信小程序实现点击导航标签滚动定位到对应位置


Posted in Javascript onNovember 19, 2020

本文要实现的是点击标签滚动定位到对应位置,且给在当前板块范围指定的导航标签添加样式

效果的话看下面GIF

微信小程序实现点击导航标签滚动定位到对应位置

wxml部分

top当前离顶部滚动的距离
block_ScrollTop是当前模块离顶部的距离,多减60是因为我的导航是悬浮的,会挡住部分内容,自行修改;
specify-style是我自定义选中标签时的样式,可自行更改;

<!-- 导航 -->
 <view class='nav' id="tab-con">
 <view class='resume-title'>伟安的简历</view>
 <view bindtap="toblock1" class="{{top<block2_ScrollTop-60?'specify-style':''}}">关于我</view>
 <view bindtap="toblock2" class="{{top>=block2_ScrollTop-60&&top<block3_ScrollTop-60?'specify-style':''}}">工作经验</view>
 <view bindtap="toblock3" class="{{top>=block3_ScrollTop-60?'specify-style':''}}">项目经验</view>
 </view>
 <!-- 中部内容 -->
 <view class="body">
 <scroll-view class="list" scroll-y="true" style="height:{{winHeight}}">
 <view id='block_1'>
 <!-- 第一个板块 -->
 </view>
 <view id='block_2'>
 <!-- 第二个板块 -->
 </view>
 <view id='block_3'>
 <!-- 第三个板块 -->
 </view>
 <view id='block_3'>
 <!-- 嗯,高度不够凑数的 -->
 </view>
 </scroll-view>
 </view>

wxss选中的字体加粗以及底部三角形样式参考

用了伪类::before画了三角形,板块没有内容所以加了高度。

.nav {
 display: flex;
 justify-content: space-around;
 align-items: center;
 height: 100rpx;
 background-color: rgba(0, 0, 0, 0.2);
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 9999;
}

.specify-style {
 font-weight: 800;
 position: relative;
}

.specify-style::before {
 content: '';
 border: solid transparent;
 border-width: 0px 14rpx 14rpx 14rpx;
 border-bottom-color: snow;
 position: absolute;
 z-index: 1000;
 margin-top: 36rpx;
 left: 37%;
}

#block_1,
#block_2,
#block_3 {
 height: 70vh;
}

#block_1 {
 background-color: aqua;
}

#block_2 {
 background-color: bisque;
}

#block_3 {
 background-color: cadetblue;
}

js部分

先是在onLoad中拿到自适应winHeight赋值到scroll-view组件;
然后通过createSelectorQuery方法获取顶部id、板块一id、板块二id、板块三id离顶部的距离;
然后通过onPageScroll方法时时监听获取当前位置离顶部滚动的距离;
然后通过pageScrollTo实现点击跳转定位;

Page({
 data: {
 //当前离顶部滚动的距离
 top: 0,
 },
 // 监听滚动事件 scrollTop 滚动的距离
 onPageScroll: function (e) { // 获取滚动条当前位置
 // console.log(e)
 this.setData({
 top: e.scrollTop
 })
 if (e.scrollTop > this.data.tabScrollTop) {
 this.setData({
 tabFixed: true
 })
 // console.log("我锁定了")
 } else {
 this.setData({
 tabFixed: false
 })
 }
 },
 //点击跳转到板块一
 toblock1: function () {
 wx.pageScrollTo({
 /*
 *多减50是因为我的导航是悬浮的,会挡住部分内容
 *这里是1等于2rpx
 */
 scrollTop: this.data.block1_ScrollTop - 50
 })
 },
 //点击跳转到板块二
 toblock2: function () {
 wx.pageScrollTo({
 scrollTop: this.data.block2_ScrollTop - 50
 })
 },
 //点击跳转到板块三
 toblock3: function () {
 wx.pageScrollTo({
 scrollTop: this.data.block3_ScrollTop - 50
 })
 },
 onLoad: function (options) {
 let that = this
 // 高度自适应
 wx.getSystemInfo({
 success: function (res) {
 var clientHeight = res.windowHeight,
  clientWidth = res.windowWidth,
  rpxR = 750 / clientWidth;
 var calc = clientHeight * rpxR;
 that.setData({
  winHeight: calc
 });
 }
 });
 var query = wx.createSelectorQuery()
 //获取顶部的距离
 query.select('#tab-con').boundingClientRect(function (res) {
 var top = res.top;
 if (top == null) {
 var top = 0;
 }
 that.setData({
 tabScrollTop: top
 })
 }).exec()
 //获取板块一离顶部的距离
 query.select('#block_1').boundingClientRect(function (res) {
 that.setData({
 block_1ScrollTop: res.top
 })
 }).exec()
 //获取板块二离顶部的距离
 query.select('#block_2').boundingClientRect(function (res) {
 that.setData({
 block2_ScrollTop: res.top
 })
 }).exec()
 //获取板块三离顶部的距离
 query.select('#block_3').boundingClientRect(function (res) {
 that.setData({
 block3_ScrollTop: res.top
 })
 }).exec()
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
vue中如何使用ztree
Feb 06 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
深入了解Vue3模板编译原理
Nov 19 #Vue.js
微信小程序实现倒计时功能
Nov 19 #Javascript
微信小程序实现列表左右滑动
Nov 19 #Javascript
详解JavaScript 中的批处理和缓存
Nov 19 #Javascript
Javascript中window.name属性详解
Nov 19 #Javascript
JavaScript实现图片合成下载的示例
Nov 19 #Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 #Vue.js
You might like
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
浅谈PHP中的
2016/04/23 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
Knockout自定义绑定创建方法
2015/12/26 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
Python爬取京东的商品分类与链接
2016/08/26 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
django框架自定义用户表操作示例
2018/08/07 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
详解python itertools功能
2020/02/07 Python
为什么说python更适合树莓派编程
2020/07/20 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
应聘自荐书
2013/10/08 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
家电业务员岗位职责
2014/03/10 职场文书
工地标语大全
2014/06/18 职场文书
cf战队收人口号
2014/06/21 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
三好学生评语大全
2014/12/29 职场文书
证婚人致辞精选
2015/07/28 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Python如何配置环境变量详解
2021/05/18 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python