vue實現下拉到不同位置改變導航背景色

来源:https://www.cnblogs.com/chenyingying0/archive/2020/04/06/12648477.html
-Advertisement-
Play Games

效果圖 src/components/scroll/index.vue <template> <!-- 通過ref可以獲取到dom對象 --> <swiper class="swiper" :options="swiperOption" ref="swiper"> <div class="mine- ...


效果圖

 

src/components/scroll/index.vue

<template>
    <!-- 通過ref可以獲取到dom對象 -->
    <swiper class="swiper" :options="swiperOption" ref="swiper">
      <div class="mine-scroll-pull-down">
          <me-loading :text="pullDownText" inline ref="pullDownLoading" />
      </div>
      <swiper-slide>
          <!-- 所有內容放在插槽里 -->
          <slot></slot>
      </swiper-slide>
      <div class="mine-scroll-pull-up">
          <me-loading :text="pullUpText" inline ref="pullUpLoading" />
      </div>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
  </swiper>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
  import 'swiper/css/swiper.css';
  import MeLoading from 'components/loading';

  export default {
    name: 'Scrollbar',
    title: 'Scrollbar',
    components: {
      Swiper,
      SwiperSlide,
      MeLoading
    },
    data() {
      return {
        pulling:false,//是否正在下拉中
        pullDownText:'向下拉動會重新載入幻燈片哦',
        pullUpText:'向上拉動會載入更多哦',
        swiperOption: {
          scrollbar: {
            el: '.swiper-scrollbar',
            hide: true
          },
          direction:'vertical',
          slidesPerView:'auto',
          freeMode:true,
          setWrapperSize:true,
          on:{//下拉刷新時觸發的事件
            sliderMove:this.sliderMove,//一開始使用sliderMove，有bug
            touchEnd:this.touchEnd,
            transitionEnd:this.scrollEnd//滾動結束
          }
        },
      }
    },
    props:{
      recommends:{
        type:[Array,Object],
        default(){
          return [];
        }
      }
    },
    watch:{//當recommends值發生改變時
      recommends(){
        this.$refs.swiper && this.$refs.swiper.$swiper.update();//更新滾動條長度
      }
    },
    methods:{
      sliderMove(){
        if(this.pulling) return;//正在下拉中，則不重覆下拉

        const swiper=this.$refs.swiper.$swiper;

        this.$emit("scrolling",swiper.translate,swiper);

        if(swiper.translate>0){//向下拉
          if(swiper.translate>100){//超出規定的高度
            this.$refs.pullDownLoading.setText("開始下拉...");
          }else{
            this.$refs.pullDownLoading.setText("向下拉動會重新載入幻燈片哦");
          }
        }else if(swiper.isEnd){//上拉

          //是否達到上拉的觸發條件
          //swiper的位移加上swiper的高度（617px）-50px的值如果大於當前內容高度
          //swiper.translate這個屬性可以獲取到wrapper的位移，其實可以理解為滾動條滾動的距離
          //swiper.height這個屬性獲取swiper容器的高度， 也就是顯示區域的高度
          //50px是我們設置的一個值。為了讓頁面不是到達最低部的時候，可以提前載入內容
          //parseInt(swiper.$wrapperEl.css('height'))是wrapper的HTML元素的height屬性， 也就是所有內容的高度
          const isPullUp=Math.abs(swiper.translate)+swiper.height-50 > parseInt(swiper.$wrapperEl.css('height'));

          if(isPullUp){//開始上拉
            this.$refs.pullUpLoading.setText("開始上拉");
          }else{//保持初始化
            this.$refs.pullUpLoading.setText('向上拉動會載入更多哦');
          }
        }
      },
      touchEnd(){

        if(this.pulling) return;//正在下拉中，則不重覆下拉

        const swiper=this.$refs.swiper.$swiper;
        
        if(swiper.translate>100){

          this.pulling=true;//正在下拉中

          swiper.allowTouchMove=false;//禁止觸摸
          swiper.setTransition(swiper.params.speed);//設置初始速度
          swiper.setTranslate(100);//移動到設定的位置（拖動過度時回到設置的位置）
          swiper.params.virtualTranslate=true;//定住不給回彈
          this.$refs.pullDownLoading.setText("正在下拉中...");//設置正在刷新中的文字
          this.$emit("pull-down",this.pullDownEnd);//觸發消息，傳遞結束下拉的函數

        }else if(swiper.isEnd){//上拉
          //是否達到上拉的觸發條件
          const isPullUp=Math.abs(swiper.translate)+swiper.height-30>parseInt(swiper.$wrapperEl.css('height'));

          if(isPullUp){//開始上拉
            
            this.pulling=true;

            swiper.allowTouchMove=false;//禁止觸摸
            swiper.setTransition(swiper.params.speed);//設置初始速度
            swiper.setTranslate(-(parseInt(swiper.$wrapperEl.css('height'))+50-swiper.height));//超過拉動距離時回彈
            swiper.params.virtualTranslate=true;//定住不給回彈
            this.$refs.pullUpLoading.setText("正在上拉中...");//設置正在刷新中的文字
            this.$emit("pull-up",this.pullUpEnd);//觸發消息，傳遞結束下拉的函數

          }
        }
      },
      pullDownEnd(){
        const swiper=this.$refs.swiper.$swiper;

        this.pulling=false;//下拉結束

        this.$refs.pullDownLoading.setText("下拉結束");//設置載入結束後的文字
        swiper.allowTouchMove=true;//可以觸摸
        swiper.setTransition(swiper.params.speed);//設置初始速度           
        swiper.params.virtualTranslate=false;//可以回彈
        swiper.setTranslate(0);//移動到最初的位置

        //動畫完成後再觸髮結束事件
        setTimeout(()=>{
          this.$emit("pulldown-end");
        },swiper.params.speed);
       
      },
      pullUpEnd(){
        const swiper=this.$refs.swiper.$swiper;

        this.pulling=false;

        this.$refs.pullUpLoading.setText("上拉結束");//設置載入結束後的文字
        swiper.allowTouchMove=true;//可以觸摸           
        swiper.params.virtualTranslate=false;//可以回彈
      },
      scrollTop(){
        this.$refs.swiper.$swiper.slideTo(0);//回到頂部
      },
      scrollEnd(){
        this.$emit("scroll-end",this.$refs.swiper.$swiper.translate,this.$refs.swiper.$swiper,this.pulling);
      }
    }
  }
</script>

<style lang="scss" scoped>
    .swiper-container{
      width:100%;
      height:100%;
      overflow:hidden;
    }
    .swiper-slide{
      height:auto;
    }
    .mine-scroll-pull-down{
        position:absolute;
        left:0;
        bottom:100%;
        width:100%;
        height:80px;
    }
    .mine-scroll-pull-up{
        position:absolute;
        left:0;
        top:100%;
        width:100%;
        height:30px;
    }
</style>

 

src/pages/home/index.vue

<template>
    <div class="home">
        <div class="g-header-container">
            <home-header :class="{'header-transition':headerTransition}" ref="header"/>
        </div>
        <scrollbar :data="recommends" @pull-down="pullRefresh" @pull-up="loadMore" @scroll-end="scrollEnd" ref="scroll" @scrolling="changeHeader">
            <slider ref="mySwiper" />
            <home-nav />
            <!-- 熱門推薦載入完成後更新滾動條 -->
            <recommend @loaded="updateScroll" ref="recommend" />
        </scrollbar>
        <div class="g-backtop-container">
            <me-backtop :visible="backtopVisible" @backtop="backtop" />
        </div>
        <!-- 該頁面自己的子路由 -->
        <router-view></router-view>
    </div>

</template>

<script>
import Slider from 'components/slider';
import Scrollbar from 'components/scroll';
import HomeNav from './nav';
import Recommend from './recommend';
import MeBacktop from 'components/backtop';
import HomeHeader from './header';

export default {
    name:"Home",
    components:{
        Slider,   
        Scrollbar,
        HomeNav,
        Recommend,
        MeBacktop,
        HomeHeader   
    },
    data(){
        return{
            recommends:[],
            backtopVisible:false,
            headerTransition:false
        }
    },
    methods:{
        updateScroll(recommends){
            this.recommends=recommends;
        },
        pullRefresh(end){//刷新輪播圖
            this.$refs.mySwiper.getSliders().then(end);
        },
        loadMore(end){//載入更多
            this.$refs.recommend.getRecommends().then(end).catch(err=>{
                if(err){//沒有更多圖片了
                    console.log(err);
                }
                end();
            });
        },
        scrollEnd(translate,swiper,pulling){//下拉刷新結束
            //顯示回到頂部按鈕
            this.backtopVisible=translate<0 && -translate>swiper.height;//向下拉並且距離大於一屏
            if(!pulling){
                this.changeHeader(translate,swiper);
            }
           
        },
        backtop(){
            this.$refs.scroll && this.$refs.scroll.scrollTop();//回到頂部
        },
        changeHeader(translate,swiper){//修改頭部導航背景色
            if(translate>0){//下拉中，隱藏導航
                this.$refs.header.hide();
                return;
            }else{
                this.$refs.header.show();
                this.headerTransition=-translate>200;//大於200時返回true，改變導航背景色
            }
        },
    }
}
</script>

<style lang="scss" scoped>
    .home{
        width:100%;
        height:100%;
    }
    .g-header-container{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        z-index:999;
        height:50px;
    }
    .g-backtop-container{
        position: absolute;
        z-index:1100;
        right:10px;
        bottom:60px;
    }
</style>

 

src/pages/home/header.vue

<template>
    <div class="header" v-show="headerVisible">
        <i class="iconfont icon-scan header-left"></i>
        <div class="headerr-center">搜索框</div>
        <i class="iconfont icon-msg header-right"></i>
    </div>
</template>

<script>
export default {
    name:"HomeHeader",
    data(){
        return{
           headerVisible:true
        }
    },
    methods:{
        show(){
            this.headerVisible=true;
        },
        hide(){
            this.headerVisible=false;
        }
    }
}
</script>

<style lang="scss" scoped>
    .header{
        background:transparent;
        transition:background-color 0.5s;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:5px 20px;

        .iconfont{
            font-size:24px;
            color:#fff;
        }

        //下拉到一定位置，添加.header-transition，使導航背景色變紅
        &.header-transition{
            background-color:rgba(222, 24, 27, 0.9);
        } 

        .headerr-center{
            flex:1;
        }
    }     
</style>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【趙強老師】SQL的字元函數
    字元函數，顧名思義，操作的就是字元串。通過下圖，我們來瞭解一下Oracle的字元函數。 一、大小寫控制函數 lower、upper、initcap select lower('Hello World') 轉小寫,upper('Hello World') 轉大寫,initcap('hello worl ...
  • 【趙強老師】刪除表和Oracle的回收站
    一、Oracle的Drop Table語句 首先，我們來看一下Oracle Drop Table的語法格式。 解釋一下裡面的參數： schema Schema表示方案名稱，這裡可以理解為用戶名，預設為當前用戶下的表。比如，要刪除scott用戶下的emp表，drop table scott.emp p ...
  • 讀者來信 | 剛搭完HBase集群，Phoenix一啟動，HBase就全崩了，是什麼原因?（已解決）
    前言： 之前有朋友加好友與我探討一些問題，我覺得這些問題倒挺有價值的；於是就想在本公眾號開設一個問答專欄，方便技術交流與分享，專欄名就定為： 《讀者來信》 。如遇到本人能力有限難以解決的問題，我將轉發該文至我的資源圈儘力尋求大佬們出手幫助，並附上提問者微信二維碼，希望給大家提供這樣一個互幫互助解決問 ...
  • redis 分散式緩存實戰-redis 事務
    redis 分散式緩存實戰-redis 事務 1.描述 redis 事務單獨的隔離操作：事務中的所有命令都會序列化、按順序執行。事務在執行過程中，不會被其他客戶端發送過來的命令請求所打斷。 redis 事務沒有隔離級別的概念：隊列中的命令沒有提交之前都不會實際的被執行，因為事務提交前任何指令都不會被 ...
  • 類（元類）對象方法緩存原理
    一、摘要 1.閱讀該篇，需要對runtime底層及類對象數據結構有一定瞭解，本篇僅著重講解方法緩存的演算法； 2.以下以類對象來論述，元類對象以此類推； 二、類對象數據結構 //rumtime源碼 //小碼哥圖片 說明：其中cache_t類型變數cache就是用來緩存曾經調度過的方法； 三、方法調度原 ...
  • vue分類頁開發--axios數據獲取，localstorage數據緩存
    效果圖 1、首先在app.vue中，給路由添加keep-alive，使其能夠被緩存 2、配置路由 router/index.js 3、書寫各部分組件 src/pages/category/header.vue <template> <div class="header"> <i class="ico ...
  • JavaScript連載3-變數記憶體分析、常量、數據類型
    一、變數的內粗分析 1.變數的預設值 （1）如果變數初始化時沒有賦值，那麼裡面存儲的時undefined （2）示例 var lk; console.log(lk); 2.同時聲明多個變數 兩種方式 var name,age,sex; name = "kdfg"; age = 2; //或者 var ...
  • ES6 - 基礎學習(3): const關鍵字的本質
    const 是如何做到變數在聲明初始化之後不允許改變的？ 其實 const 保證的不是變數的值不允許改變，而是保證該變數指向的記憶體地址所保存的數據不允許改變。由於簡單數據類型和複合數據類型保存值的方式不同： 對於簡單類型的數據（數值 number、字元串 string 、布爾值 boolean），值 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類