微信小程序顶部点击节点

最新推荐文章于 2023-05-16 11:04:35 发布

呱嗨喵

最新推荐文章于 2023-05-16 11:04:35 发布

阅读量218

点赞数

分类专栏：微信小程序

原文链接：https://blog.csdn.net/weixin_42063951/article/details/102526153?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%82%B9%E5%87%BB%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9&utm_m

版权

微信小程序专栏收录该内容

27 篇文章 0 订阅

订阅专栏

 <!-- 导航 -->
 <view class='nav' id="tab-con">
 	<view class='resume-title'>我的简历</view>
 	<view bindtap="toblock1" class="{{top<block2_top-60?'selected':''}}">关于我</view>
 	<view bindtap="toblock2" class="{{top>=block2_top-60&&top<block3_top-60?'selected':''}}">工作经验</view>
 	<view bindtap="toblock3" class="{{top>=block3_top-60?'selected':''}}">项目经验</view>
 </view>
 <!-- 中部内容 -->
 <view class="body">
 	<scroll-view class="list" scroll-y="true" style="height:{{winHeight}}">
 		<view id='block1'>
 			<!-- 第一个板块 -->
 		</view>
 		<view id='block2'>
 			<!-- 第二个板块 -->
 		</view>
 		<view id='block3'>
 			<!-- 第三个板块 -->
 		</view>
 	</scroll-view>
 </view>

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

.selected {
  font-weight: bolder;
  position: relative;
}

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

#block1,
#block2,
#block3 {
  height: 100vh;
}

#block1 {
  background-color: aqua;
}

#block2 {
  background-color: bisque;
}

#block3 {
  background-color: cadetblue;
}

Page({
  data: {
    //当前离顶部滚动的距离
    top: 0,
  },
  // 监听滚动事件
  onPageScroll: function (e) {
    // console.log(e)
    // 滚动条当前位置
    let scrollTop = e.scrollTop
    this.setData({
      top: scrollTop
    })
  },
  //点击跳转到板块一
  toblock1: function () {
    wx.pageScrollTo({
      /*
       *多减50是因为我的导航是悬浮的，会挡住部分内容
       *这里是1等于2rpx
       */
      scrollTop: this.data.block1_ScrollTop - 50
    })
  },
  //点击跳转到板块二
  toblock2: function () {
    wx.pageScrollTo({
      scrollTop: this.data.block2_top - 50
    })
  },
  //点击跳转到板块三
  toblock3: function () {
    wx.pageScrollTo({
      scrollTop: this.data.block3_top - 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('#block1').boundingClientRect(function (res) {
    //   that.setData({
    //     block1_top: res.top
    //   })
    // }).exec()
    //获取板块二离顶部的距离
    query.select('#block2').boundingClientRect(function (res) {
      that.setData({
        block2_top: res.top
      })
    }).exec()
    //获取板块三离顶部的距离
    query.select('#block3').boundingClientRect(function (res) {
      that.setData({
        block3_top: res.top
      })
    }).exec()
  },
})