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


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 验证上传图片大小[客户端]
Aug 01 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
js实现导航跟随效果
Nov 17 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
php异常处理捕获错误整理
2019/09/23 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
django项目搭建与Session使用详解
2018/10/10 Python
Python3 log10()函数简单用法
2019/02/19 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
J2EE系统只能是基于web
2015/09/08 面试题
国际商务专业求职信
2014/07/15 职场文书
资金申请报告范文
2015/05/14 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
使用Apache Camel表达REST服务的方法
2022/06/10 Servers