<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        基于vue監聽滾動事件實現錨點鏈接平滑滾動的方法

        來源:懂視網 責編:小OO 時間:2020-11-27 22:21:22
        文檔

        基于vue監聽滾動事件實現錨點鏈接平滑滾動的方法

        基于vue監聽滾動事件,實現錨點鏈接平滑滾動。近日在做一個vue項目的餐飲模塊,小編需要實現一個菜單列表顯示的功能(如圖所示:左邊為菜單類別,右邊顯示相對應的菜品)。小編將此分為三個功能模塊來實現(本來一張動畫就清晰明了,小編太笨,只得口述一下)。1.左邊點擊類別,右邊顯示相應類別的菜品列表(平滑滾動)。2.滾動右邊的滾動條,左邊對應的顯示當前樣式。3.若從別的頁面點擊菜品進來該頁面,則該菜品為指定效果。小編也是vue的初學者,在閱讀了大量的文章后,其中借鑒//www.gxlcms.com/article/110325.htm 該文章,收到了很多啟發后,結合的功能加以完善。小編的和借鑒的文章側重點不同,建議大家在看之前可以先看一下上面的,以便于梳理的更清楚。
        推薦度:
        導讀基于vue監聽滾動事件,實現錨點鏈接平滑滾動。近日在做一個vue項目的餐飲模塊,小編需要實現一個菜單列表顯示的功能(如圖所示:左邊為菜單類別,右邊顯示相對應的菜品)。小編將此分為三個功能模塊來實現(本來一張動畫就清晰明了,小編太笨,只得口述一下)。1.左邊點擊類別,右邊顯示相應類別的菜品列表(平滑滾動)。2.滾動右邊的滾動條,左邊對應的顯示當前樣式。3.若從別的頁面點擊菜品進來該頁面,則該菜品為指定效果。小編也是vue的初學者,在閱讀了大量的文章后,其中借鑒//www.gxlcms.com/article/110325.htm 該文章,收到了很多啟發后,結合的功能加以完善。小編的和借鑒的文章側重點不同,建議大家在看之前可以先看一下上面的,以便于梳理的更清楚。

        基于vue監聽滾動事件,實現錨點鏈接平滑滾動

        近日在做一個vue項目的餐飲模塊,小編需要實現一個菜單列表顯示的功能(如圖所示:左邊為菜單類別,右邊顯示相對應的菜品)

        小編將此分為三個功能模塊來實現(本來一張動畫就清晰明了,小編太笨,只得口述一下):

        1.左邊點擊類別,右邊顯示相應類別的菜品列表(平滑滾動)
        2.滾動右邊的滾動條,左邊對應的顯示當前樣式
        3.若從別的頁面點擊菜品進來該頁面,則該菜品為指定效果

        小編也是vue的初學者,在閱讀了大量的文章后,其中借鑒//www.gxlcms.com/article/110325.htm 該文章,收到了很多啟發后,結合我們的功能加以完善。小編的和借鑒的文章側重點不同,建議大家在看之前可以先看一下上面的,以便于梳理的更清楚。

        :scrollTop(滾動之根本)

        在初寫項目的嘗試過程中,小編一直改變的是document.body.scrollTop的值來實現滾動,但是后來逐漸發現很邪門,有時給其賦值并沒有作用,而且過程也很麻煩,又查閱了一些資料也沒有解決辦法,所以不得已放棄。

        之后無意中看到:scrollTop, 便嘗試開始使用vue中的屬性直接進行綁定滾動的變量值,功能實現反而簡單了。下面詳細講述:

        一、組件html結構:

        結構布局很簡單,在此多說是想給大家講述清楚一點兒右邊菜品的結構,方便綁定:scrollTop屬性,小編就踩了這個坑...

        注意看注釋::scrollTop 的位置改變菜品列表的scrollTop值,來實現相應的滾動

        二、實現錨鏈接平滑滾動

        該功能是參考之前博主的文章的,方法基本沒改什么,簡單易懂,直接放代碼

        jump(index){
         const cateItem = document.querySelectorAll('.cate-item');
         let total = cateItem[index].offsetTop;
         let distance = this.container.scrollTop // 獲取到頂部的距離(this.container便是.cate-list,為了方便存起來了)
         let step = total / 50;
         this.isActive = index; // 菜單列表顯示當前樣式
         const _this = this;
         if (total > distance) {
         smoothDown()
         } else {
         let newTotal = distance - total
         step = newTotal / 50
         smoothUp()
         }
         function smoothDown () {
         if (distance < total) {
         distance += step
         _this.scrollTop = distance;
         setTimeout(smoothDown, 10);
         } else {
         _this.scrollTop = total
         }
         }
         function smoothUp () {
         if (distance > total) {
         distance -= step
         _this.scrollTop = distance
         setTimeout(smoothUp, 10)
         } else {
         _this.scrollTop = total
         }
         } 
         }
        

        三、監聽滾動事件,修改錨點狀態

        在vue中鉤子函數監聽菜品列表(this.container)的滾動事件,

         mounted(){
         // 監聽scroll事件
         const _this = this;
         setTimeout(function(){
         _this.currentStick(); 
         const rightItem = document.querySelectorAll('.cate-item');
         const catelist = document.querySelectorAll('.cate-list')[0];
         var length = rightItem.length;
         var height = rightItem[length-1].offsetHeight;
         var scrollHeight = document.querySelectorAll('.cate-menu-wrapper')[0].offsetHeight;
         // 設置最后一個類別菜品列表的高度(小于適配器高度的話與適配器等高),不然點擊錨點不能夠置頂
         if(height < scrollHeight){
         rightItem[length-1].style.height = scrollHeight+'px';
         } 
         var arr =[];
         rightItem.forEach(function(v, i){
         arr.push({top: v.offsetTop, height: v.offsetHeight, index: i});
         })
         _this.itemVal = arr; 
         const cateList = document.querySelectorAll('.cate-list')[0];
         cateList.addEventListener('scroll', _this.onScroll);
         _this.container = cateList;
         }, 500)
         },
        

        這里寫的有點啰嗦了,設置setTimeout延遲是為了能夠獲取到元素(誰有好辦法快推薦給我),為了在滾動中能夠對應列表顯示錨點當前狀態,存了一個數據itemAll,存了該菜品類別區域的scrollTop,索引,高度。(啰嗦,太啰嗦了)

        methods: {
         onScroll () {
         var _this = this;
         _this.itemVal.forEach(function(obj, i){
         _this.scrollTop = _this.container.scrollTop;
         if(_this.scrollTop >= obj.top && _this.scrollTop < (obj.top + obj.height-10)){
         // scrollTop的移動位置要在類別的菜品列表中才顯示對應錨點的當前狀態
         _this.isActive = obj.index;
         }
         })
         },
        }
        

        三、點擊菜品進入頁面,該菜品置頂的聯動效果(該功能其實有隱藏性的bug,我們項目已取消該功能)

        currentStick(){
         const {dishId} = this.$route.query;
         const cateContent = document.querySelectorAll('.cate-content');
         const _this = this;
         cateContent.forEach(function(v, i){
         if(v.id == dishId){
         _this.scrollTop = v.offsetTop; 
         }
         })
         },
        

        該功能用:scrollTop綁定的話便簡單了許多,之前用document.body.scrollTop 設置值一直沒有作用。

        好了,基本上所有的代碼都帖出來了,說的應該也詳細吧(我盡力了),該方法感覺其實還是在操作dom元素和js,枉用vue。但是一時也沒有更好的辦法來實現。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        基于vue監聽滾動事件實現錨點鏈接平滑滾動的方法

        基于vue監聽滾動事件,實現錨點鏈接平滑滾動。近日在做一個vue項目的餐飲模塊,小編需要實現一個菜單列表顯示的功能(如圖所示:左邊為菜單類別,右邊顯示相對應的菜品)。小編將此分為三個功能模塊來實現(本來一張動畫就清晰明了,小編太笨,只得口述一下)。1.左邊點擊類別,右邊顯示相應類別的菜品列表(平滑滾動)。2.滾動右邊的滾動條,左邊對應的顯示當前樣式。3.若從別的頁面點擊菜品進來該頁面,則該菜品為指定效果。小編也是vue的初學者,在閱讀了大量的文章后,其中借鑒//www.gxlcms.com/article/110325.htm 該文章,收到了很多啟發后,結合的功能加以完善。小編的和借鑒的文章側重點不同,建議大家在看之前可以先看一下上面的,以便于梳理的更清楚。
        推薦度:
        標簽: 方法 VUE 平滑
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲理论精品午夜电影| 久久青青草原亚洲AV无码麻豆| 99视频在线精品免费观看6| 免费大香伊蕉在人线国产 | 人人鲁免费播放视频人人香蕉| 久久国产色AV免费看| 亚洲精品NV久久久久久久久久| 久久久久亚洲精品天堂| 国产成人高清亚洲一区久久| 99在线在线视频免费视频观看| 免费一级成人毛片| 色多多www视频在线观看免费| 国产jizzjizz免费视频| 男人扒开添女人下部免费视频| 最近免费mv在线观看动漫 | 亚洲国产婷婷香蕉久久久久久| 美女视频黄频a免费| 久久国内免费视频| 亚洲综合一区二区国产精品| 最近最好最新2019中文字幕免费| 全黄性性激高免费视频| 人妻18毛片a级毛片免费看| 日本亚洲欧洲免费天堂午夜看片女人员| 亚洲国产精品成人精品软件| 日本中文字幕免费高清视频| 亚洲男人的天堂一区二区| 成av免费大片黄在线观看| 无码不卡亚洲成?人片| 亚洲日韩一区二区一无码| 国产成人精品免费视频大| 亚洲AV成人精品网站在线播放| 国产又黄又爽胸又大免费视频| 亚洲av无码成人黄网站在线观看| 免费看男女下面日出水来| 色屁屁在线观看视频免费| 久久国产精品亚洲综合| 成人黄动漫画免费网站视频 | 亚洲免费视频一区二区三区| 亚洲精品无码久久久久AV麻豆| a级毛片免费高清毛片视频| 国产成人精品日本亚洲|