微信小程序课堂教学_微信小程序完成点击导航标

日期:2021-01-04 类型:行业动态 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

微信小程序实现点击导航标签滚动定位到对应位置       这篇文章主要为大家详细介绍了微信小程序实现点击导航标签滚动定位到对应位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果的话看下面GIF

wxml部分

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

 !-- 导航 -- 
 view id="tab-con" 
 view 伟安的简历 /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 
 scroll-view scroll-y="true" 
 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()
})

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

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