vue 橫向滑動拖動

ue 橫向滾動

HTML 代碼

<div class="slide-box">
      <div class="slide-within">
        <div class="slide-item" v-for="(item,index) in listData" :key="index">{{ index + item.label }}</div>
      </div>
    </div>

css 代碼

.slide-box {
  margin-top: 200px;
  overflow: hidden;
}

.slide-within {
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

.slide-item {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin-right: 30px;
}

js 代碼

本篇文章主要給大家介紹一下如何使用html+css完成二級橫向以及豎向菜單導航制作；菜單導航是網站建設中最常用的一塊了，基本每個網站內都會有個導航菜單，用鼠標劃過還可以有下拉子菜單。

由上圖我們可以看出，該圖包含一個橫向導航條，然后鼠標經過橫向導航條之后，子導航顯示出來。

1）制作頁面所用知識點

我們這里主要用到的知識點就是列表標簽（ul、dl）的使用、浮動（float）的使用、絕對定位（absolute）及鼠標經過（hover）的效果。

1、列表標簽ul、dl（我們使用ul、dl來創建同類型的導航元素內容，通過設置css樣式來達到圖片所示效果）；

2、浮動元素float（每個導航元素我們需要使用float:left;讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；

3、絕對定位absolute（對于子導航我們要使用絕對定位來讓其浮動在上級有定位元素的下方，不占據元素空間）

4、鼠標經過hover（使用css的鼠標經過元素（hover）效果，配合display的none（隱藏）和block（顯示）來實現子菜單的顯示與隱藏）

具體的實現html代碼以及css代碼就如下圖所示：

2）縱向菜單導航

還有一個縱向菜單導航原理跟橫向的類似，只需簡單調整一下css代碼即可。

html代碼跟橫向一樣，這里就不再貼圖，具體的實現圖片效果以及css代碼就如下圖所示：

好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信我即可。

每日金句：每天收獲小進步，積累起來就是大進步；每天收獲小幸福，積攢起來便成大幸福。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

果

方法一：sticky 方式

核心樣式

        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }

解釋

.pure-table-wrapper-div:
這個類名應用于包裹表格的 div 元素。它的樣式規則如下：
overflow-x: scroll;: 當內容寬度超出容器寬度時，顯示水平滾動條。這允許用戶在需要時水平滾動查看表格的所有列。

示例 HTML 結構：

<div class="pure-table-wrapper-div"> <table class="pure-table">  </table> </div>

table.pure-table th:first-child, table.pure-table td:first-child: 這兩個選擇器分別針對 .pure-table 類的表格中的第一個表頭單元格（<th>）和第一個數據單元格（<td>）。

它們定義的樣式規則如下：

position: sticky;: 使用黏性定位。黏性定位元素在滾動時會根據設置的 top、bottom、left 或 right 屬性值在特定位置 "粘附"。在本例中，由于定義了 left: 0;，這些元素會在左側邊緣粘附。 left: 0;: 在元素滾動到視口左側邊緣時使其粘附。與 position: sticky; 結合使用。

z-index: 1;: 設置元素的堆疊順序。值越大，元素越靠前。在這種情況下，將第一個單元格設置為 z-index: 1 可確保它在其他表格單元格之上。

background-color: aliceblue;: 為匹配的單元格設置背景顏色。這可以增強視覺效果，使粘附的單元格與其他單元格區分開。
這段 CSS 代碼的主要目的是實現表格的水平滾動，并固定第一列，使其在水平滾動時保持可見。同時，為第一列的單元格設置了背景顏色以增強視覺效果。

總的來說是：

使用 position: sticky; 來固定第一列。在 table.pure-table th:first-child 中設置了 position: sticky; 和 left: 0;，并將 z-index 設為 1，以確保第一列在滾動時會固定在屏幕上方。

完整代碼

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./purecss@3.0.0.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文檔</title>
    <style>
        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="pure-table-wrapper-div">
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>品牌</th>
                    <th>型號</th>
                    <th>隨機字符串</th>
                    <th>說明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>本田</td>
                    <td>雅閣</td>
                    <td>2009-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>這是一段中文說明文字。</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>豐田</td>
                    <td>凱美瑞</td>
                    <td>2012-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>這是一段中文說明文字。</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>現代</td>
                    <td>領動</td>
                    <td>2010-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>這是一段中文說明文字。</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

中文不換行

要去除表格中最后一列中文的換行效果，可以使用 CSS 的 white-space 屬性，將其設置為 nowrap，這樣文字就不會自動換行了。

添加了以下 CSS 樣式：

table.pure-table td:last-child,
table.pure-table th:last-child {
    white-space: nowrap;
}

這樣，最后一列中文就不會自動換行了。其中 table.pure-table td:last-child 和 table.pure-table th:last-child 選擇器用于指定表格中的最后一列單元格，white-space: nowrap; 則是將 white-space 屬性設置為 nowrap，禁止其自動換行。

小結

position: sticky 是 CSS 中的一種定位方式，可以實現元素在滾動時固定在屏幕上，直到其滾動到指定位置。相對于 position: fixed，position: sticky 有以下優點和缺點：

優點：

不會脫離文檔流，因此不會影響其他元素的布局和位置；
可以在頁面滾動到指定位置時自動固定，無需手動計算位置；
可以在滾動到指定位置后自動取消固定，不會一直占據屏幕空間，避免了 position: fixed 的潛在問題；
可以在固定元素上設置 z-index 屬性，與其他元素進行層級控制。

缺點：

兼容性問題：position: sticky 不是所有瀏覽器都支持，特別是在 IE11 及以下版本中不支持；
在某些情況下可能會存在性能問題，尤其是在滾動時固定的元素較多時，可能會導致卡頓和性能下降；
在某些情況下可能會存在滾動到指定位置時出現抖動的問題，需要通過對元素和容器的尺寸、位置等進行調整來解決。

綜上所述，position: sticky 是一種靈活且易用的定位方式，具有很多優點，但在兼容性和性能方面有一些缺點需要注意。如果要在項目中使用 position: sticky，需要在兼容性和性能方面進行綜合考慮，以確保其正常運行和良好的用戶體驗。

【兼容性好】postion 的 absolute 方式【需要指定首列寬度】

核心樣式

        .pure-table-wrapper-div {
            overflow-x: scroll;
            margin-left: 5em;
        }
      
        table.pure-table tr td:first-child,
        table.pure-table tr th:first-child {
            position: absolute;
            width: 5em;
            left: 0;
        }

解釋

這段 CSS 代碼主要是為了實現固定表格首列和橫向滾動效果，并且在表格首列添加了固定的寬度。

首先，.pure-table-wrapper-div 是一個包裹表格的 div 元素，通過設置 overflow-x: scroll，實現了橫向滾動的效果。同時，通過設置 margin-left: 5em，在左側添加了 5em 的空白，使得表格不會緊貼在頁面最左側，美觀性更好。

接著，table.pure-table tr td:first-child 和 table.pure-table tr th:first-child 選擇器用于選中表格中的第一列單元格，使用 position: absolute 將其從文檔流中脫離，并使用 width: 5em 指定其寬度為 5em，然后通過 left: 0 將其固定在表格最左側。

這樣，表格的首列就被固定在了左側，不會隨著表格的滾動而移動，同時也添加了固定的寬度，使得表格整體更加美觀和易讀。

總的來說，這段 CSS 代碼實現了表格的固定首列和橫向滾動效果，同時也為表格首列添加了固定的寬度，提高了表格的可讀性和美觀性。

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./purecss@3.0.0.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .pure-table-wrapper-div {
            overflow-x: scroll;
            margin-left: 5em;
        }
      
        table.pure-table tr td:first-child,
        table.pure-table tr th:first-child {
            position: absolute;
            width: 5em;
            left: 0;
        }
    </style>
    <div class="pure-table-wrapper-div">
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Make</th>
                    <th>Model</th>
                    <th>隨機數</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2009-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Toyota</td>
                    <td>Camry</td>
                    <td>2012-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Hyundai</td>
                    <td>Elantra</td>
                    <td>2010-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

小結

CSS 中的 position: absolute 定位方式可以讓元素脫離文檔流，并相對于它的最近的非 static 定位祖先元素進行定位。相對于其他定位方式，position: absolute 有以下優點和缺點：

優點：

可以精確控制元素的位置，可以在任何位置放置元素；
可以與其他元素重疊，實現復雜的布局效果；
可以讓元素脫離文檔流，不會影響其他元素的布局和位置；
可以通過設置 z-index 屬性進行層級控制。

缺點：

不會占據原來的空間，可能會導致其他元素填補其位置，影響頁面布局；
定位時需要手動指定位置，不如其他定位方式使用方便；
在某些情況下，可能會出現元素位置計算錯誤的問題，需要仔細調整位置和尺寸。

綜上所述，position: absolute 是一種靈活且強大的定位方式，可以實現很多獨特的布局效果，但需要注意它可能會對頁面布局和元素位置產生影響。在使用時，需要根據具體情況進行綜合考慮，并在保證頁面布局和元素位置正確的前提下，盡可能地利用其優點實現更好的頁面效果。

在線咨詢

上一篇：使用CSS3的新特性完成一個翻書的動畫效果，來學習一下吧
下一篇：HTML 文字滑動(marquee)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

vue 橫向滑動 拖動

HTML 代碼

css 代碼

1）制作頁面所用知識點

2）縱向菜單導航

方法一：sticky 方式

核心樣式

解釋

完整代碼

中文不換行

小結

【兼容性好】postion 的 absolute 方式【需要指定首列寬度】

核心樣式

解釋

完整代碼

小結

您的項目需求

vue 橫向滑動拖動