微信小程式實現點選導航標籤滾動定位到對應位置
阿新 • • 發佈:2020-11-20
本文要實現的是點選標籤滾動定位到對應位置,且給在當前板塊範圍指定的導航標籤新增樣式
效果的話看下面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.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() },})
為大家推薦現在關注度比較高的微信小程式教程一篇:《微信小程式開發教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。