html開發筆記12- 錨點鏈接之一鍵跳轉到指定位置

、錨點鏈接的概念

我們在瀏覽一個網頁的時候，通常會遇到比較長的網頁，一直向下拉滾動條一直向下，而在最底部的位置通常會有一個一鍵返回到頂部

或者返回到哪里的按鈕，這個按鈕就是利用的 錨點鏈接 功能。

二、錨點鏈接的語法

就兩個值：第一個就是錨點下在哪里？第二個就是點在哪里？

<body>

<!-- 2、跳轉的目標位置：點-->

<a id="test">這里是頂部</a>

<!-- 1、跳轉的按鈕：錨-->

<a href="#test">回到頂部</a>

</body>

三、錨點的用法實例

源代碼：↓

備注：如果手機上看格式錯亂，建議粘貼到電腦版編輯器里觀看。

ody

常用標簽

body分為塊級和行內

塊級獨占整行
行內內容有多少就占多少

文本格式化標簽

br 換行

<div>qwer<br/>zxcv</div>

div和span

div 塊級標簽樣式

<div style="background-color: green;">qwer</div>

span 行內標簽樣式

span style="background-color: green;">zxcv</span>

p 段落

<p>hahahahah</p> 
<p>hahahahahaaa</p>

h 標題

h1~h6y依次變小

   <div>默認文字字體</div>
   <h1>再再再再再粗一點</h1>
   <h2>再再再再粗一點</h2>
   <h3>再再再粗一點</h3>
   <h4>再再粗一點</h4>
   <h5>再粗一點</h5>
   <h6>粗一點</h6>

鏈接

a 超鏈接，跳轉到指定的地址

<a href="http://www.baidu.com" title="baidu">百度</a>

錨點，點擊后跳轉到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>野雞平臺</title>
</head>
<body>
<h1>章節</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>內容</h1>
<div style="height: 1000px;" id="i1">
   <h3>第一章 寂寞的春天</h3>
   <p>春暖花開,萬物復蘇,又到了交配的季節。</p>
</div>
<div style="height: 1000px;" id="i2">
   <h3>第二章 寂寞的夏天</h3>
   <p>夏天夏天悄悄過去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
   <h3>第三章 寂寞的秋天</h3>
   <p>今年的秋天真是寂寞呀?。?！</p>
</div>
<div style="height: 1000px;" id="i4">
   <h3>第四章 寂寞的冬天</h3>
   <p>下雪</p>
</div>
</body>
</html>

ul ol dl 列表展示

ul 無序列表
ol 有序列表
dl 層級列表
li 列表項目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>野雞平臺</title>
</head>
<body>
    <ul>
        <li>周杰倫</li>
        <li>林俊杰</li>
        <li>王力宏</li>
    </ul>
    <ol>
        <li>鐵錘</li>
        <li>鋼彈</li>
        <li>狗蛋</li>
    </ol>
    <dl>
        <dt>河北省</dt>
        <dd>邯鄲</dd>
        <dd>石家莊</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遙</dd>
    </dl>
</body>
</html>

table 表格

table表格標題
thead表格標題
tr 行標簽
th 列名
tbody表格內容
tr 列標簽
td 列內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <table border="3">   <!--border 選擇表格樣式-->>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxxx</td>
                <td>18</td>
                <td>看書</td>
            </tr>
            <tr>
                <td rowspan="3">aaaa</td>  <!--rowspan 合并單元格-->>
                <td>18</td>
                <td>吃飯</td>
            </tr>
            <tr>
                <td>33</td>>
                <td>heiheihei</td>>
            </tr>>
        </tbody>
    </table>
</body>
</html>

img 圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <!--顯示本地圖片，找不到圖片則顯示alt中的文字-->
    <img src="img/lover.png" alt="美女">
    <!--顯示網絡圖片-->
    <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子">
</body>
</html>

用戶交互

按鈕標簽

type

buttom: 普通
submit: 提交
reset: 重置

 <button type="button"> 按鈕 </button>

input

text，文本框。
password，密碼框。
radio，單選框（必須設置name屬性相同，否則無法實現）。
checkbox，復選框。
file，文件上傳。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666666</title>
</head>
<body>
    <h3>文本框</h3>
    <input type="text">
    <h3>密碼框</h3>
    <input type="password">
    <h3>單選框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>復選框</h3>
    <input type="checkbox">籃球
    <input type="checkbox">足球
    <input type="checkbox">橄欖球
    <h3>上傳文件</h3>
    <input type="file">
</body>
</html>

select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML學習</title>
</head>
<body>
    <h3>單選</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多選</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

textarea多行文本框

<!DOCTYPE html>
臥槽，無情呀
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML學習</title>
</head>
<body>
    <textarea>文本內容寫在這里...</textarea>
</body>
</body>
</html>

form表單

用于提交數據到后臺

提交時，只會提交form標簽內部【用戶交互】相關的標簽。
<input type="submit" value="提交"> 用于提交當前所在的表單。
<input type="reset" value="重置"> 用于重置當前標簽中的選項。
form標簽內置屬性action="/xx/" ，表示表單要提交的地址。method="get"，表示表單的提交方式。enctype="multipart/form-data"，如果form內部有文件上傳，必須加上此設置
form內部【用戶交互】相關標簽必須設置name，不然提交數據后后端無法獲取

// 提交表單之后，實際上會將表單中的數據構造成一種特殊的結構，發送給后臺，類似于：
{
    user:用戶輸入的姓名,
  pwd:用戶輸入的密碼,
    ...
}

radio、checkbox、select 除了要設置name屬性以外，還必須設置value屬性，因為這三中標簽在form表單提交時，不會把看到的內容提交到后臺，而是把選擇選項對應的value值提交到后臺。

ue 項目往往需要使用 vue-router 插件，剛開始入門 Uni-app + Vue3 項目的同學，會不會想著路由使用 vue-router V4 版本不就可以了嗎？

不怕大家笑話，我就是這樣想的，畢竟我是第一次使用 Uni-app ，由于孕期記性賊差，所以我決定寫成筆記，加深記憶。

uni-app 頁面路由為框架統一管理的，我們需要在 page.json 文件里配置每個頁面路由以及頁面樣式，有些類似小程序中的 app.json 文件，所以 uni-app 的路由用法和寫法與 vue-router 不同。

項目初始化完成，對應的 page.json 文件為：

{
	"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

pages 屬性

uni-app 通過 pages 節點配置應用都有哪些頁面，接收一個數組，每個元素都是一個對象，屬性有：

屬性	類型	默認值	描述
path	String		配置頁面路徑
style	Object		配置面狀態欄、導航欄、標題、窗口背景色

pages 節點的第一項為應用入口頁（即首頁）
應用中新增/減少頁面，都需要對 pages 數組進行修改
文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源

頁面跳轉

uni-app 頁面路由跳轉有兩種方式：使用 navigator 組件跳轉、調用API 跳轉。

1、navigator組件跳轉

類似于 a 標簽，但是只能跳轉到本地頁面，目標頁面必須在 page.json 中注冊。

<navigator url="/pages/animation-major/index" open-type="navigate">
	<el-button type="primary">查詢</el-button>
</navigator>

navigator 屬性有：

屬性名	類型	默認值	說明	平臺差異說明
url	String		應用內的跳轉鏈接，值為相對路徑或絕對路徑，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后綴
open-type	String	navigate	跳轉方式
delta	Number		當 open-type 為 'navigateBack' 時有效，表示回退的層數
animation-type	String	pop-in/out	當 open-type 為 navigate、navigateBack 時有效，窗口的顯示/關閉動畫效果，詳見：窗口動畫	App
animation-duration	Number	300	當 open-type 為 navigate、navigateBack 時有效，窗口顯示/關閉動畫的持續時間。	App
hover-class	String	navigator-hover	指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果
hover-stop-propagation	Boolean	false	指定是否阻止本節點的祖先節點出現點擊態	微信小程序
hover-start-time	Number	50	按住后多久出現點擊態，單位毫秒
hover-stay-time	Number	600	手指松開后點擊態保留時間，單位毫秒
target	String	self	在哪個小程序目標上發生跳轉，默認當前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

open-type 有效值

值	說明	平臺差異說明
navigate	對應 uni.navigateTo 的功能
redirect	對應 uni.redirectTo 的功能
switchTab	對應 uni.switchTab 的功能
reLaunch	對應 uni.reLaunch 的功能	字節跳動小程序與飛書小程序不支持
navigateBack	對應 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"時生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

2、uni-app API 跳轉

uni.navigateTo({
	url: "/pages/animation-major/index",
})

使用 API 頁面跳轉方式有：

uni.navigateTo：保留當前頁面，跳轉到應用內的某個頁面，使用 navigateBack 可以返回到上一頁。
uni.navigateBack：關閉當前頁面，返回上一級或多級頁面。delta 屬性設置返回層級，大于頁面數時返回首頁。
uni.redirectTo：關閉當前頁面，跳轉到應用內的某個頁面。
uni.reLaunch：關閉應用內所有頁面，打開應用內某個頁面。
uni.switchTab：跳轉到 tabBar 頁面，關閉其他非 tabBar 頁面。
uni.preloaPage：預加載頁面，是一種性能優化技術，被預載的頁面，在打開時速度更快。

頁面棧

框架以棧的形式管理當前所有頁面，當發生路由切換的時候，頁面棧的表現如下：

路由方式	頁面棧表現	觸發時機
初始化	新頁面入棧	uni-app 打開的第一個頁面
打開新頁面	新頁面入棧	調用 API uni.navigateTo 、使用組件 <navigator open-type="navigate"/>
頁面重定向	當前頁面出棧，新頁面入棧	調用 API uni.redirectTo 、使用組件 <navigator open-type="redirectTo"/>
頁面返回	頁面不斷出棧，直到目標返回頁	調用 API uni.navigateBack 、使用組件 <navigator open-type="navigateBack"/> 、用戶按左上角返回按鈕、安卓用戶點擊物理back按鍵
Tab 切換	頁面全部出棧，只留下新的 Tab 頁面	調用 API uni.switchTab 、使用組件 <navigator open-type="switchTab"/> 、用戶切換 Tab
重加載	頁面全部出棧，只留下新的頁面	調用 API uni.reLaunch 、使用組件 <navigator open-type="reLaunch"/>

頁面傳參

方式1：onLoad 接收

// 跳轉
uni.navigateTo({
	url: "/pages/sendManagement/index?id=123",
})

<script>
	import { onMounted } from 'vue';
	let parmes = null;
	export default {
		onLoad(options){
			parmes = options;
		},
		setup() {
			onMounted(() => {
				console.log('接受上個頁面傳的值',parmes)
			})
		}
	}
</script>

方式2：setup語法糖接收

<script setup>
	import { onMounted, getCurrentInstance } from 'vue';
	onMounted(()=>{
		let options = getCurrentInstance()
		console.log("options--->",options.attrs);
	})
</script>

onLoad 函數是監聽頁面加載，接收的參數是頁面傳遞的數據，是一個 object 類型。

看到這，相信很快就能上手 uni-app + vue3 項目路由嘍，也可以參考官網教程：https://uniapp.dcloud.io/tutorial/page.html#%E8%B7%AF%E7%94%B1

在線咨詢

上一篇：JavaScript 詳解：為什么寫好的代碼非常重要
下一篇：深入理解JSP

您的項目需求

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

整合營銷服務商

html開發筆記12- 錨點鏈接 之 一鍵跳轉到指定位置

、錨點鏈接的概念