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


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 相关文章推荐
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
教你一步步实现一个简易promise
Nov 02 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
php断点续传之如何分割合并文件
2014/03/22 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
python regex库实例用法总结
2021/01/03 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
历史系自荐信范文
2013/12/24 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
工资收入证明
2014/10/07 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
大学生自荐材料范文
2014/12/30 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server