微信小程序實現(xiàn)點擊導航標簽滾動定位到對應位置

更新時間：2020年11月19日 10:40:45 作者：會唱歌的前端

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)點擊導航標簽滾動定位到對應位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文要實現(xiàn)的是點擊標簽滾動定位到對應位置，且給在當前板塊范圍指定的導航標簽添加樣式

效果的話看下面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':''}}">工作經(jīng)驗</view>
 <view bindtap="toblock3" class="{{top>=block3_ScrollTop-60?'specify-style':''}}">項目經(jīng)驗</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'>
 <!-- 嗯，高度不夠湊數(shù)的 -->
 </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方法時時監(jiān)聽獲取當前位置離頂部滾動的距離；
然后通過pageScrollTo實現(xiàn)點擊跳轉定位；

Page({
 data: {
 //當前離頂部滾動的距離
 top: 0,
 },
 // 監(jiān)聽滾動事件 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()
 },
})

為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: