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


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操作userdata
Apr 27 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php include类文件超时问题处理
2015/02/06 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
django文档学习之applications使用详解
2018/01/29 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python实现图片插入文字
2019/11/26 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
一份Java笔试题
2012/02/21 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
销售自我评价
2013/10/22 职场文书
会计主管岗位职责
2014/01/03 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
高中学生自我评价范文
2014/09/23 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
预备党员半年考察意见
2015/06/01 职场文书
详解python字符串驻留技术
2021/05/21 Python
Java如何实现树的同构?
2021/06/22 Java/Android