剛學習做移動端，發現每個頁面都要做個相同的底部導航欄，如果有十個頁面就得在十個頁面上加上相同的底部導航代碼？
萬一導航內容有變化就要去修改十個頁面的代碼？
是不是可以用模版或者是類似于php include()的方法？
請各位大神指點一下迷津。
uj5u.com熱心網友回復：
當然不用每個都是寫一遍啦，封裝組件，需要的地方引入就可以了
uj5u.com熱心網友回復：
具體怎樣操作？幫忙指點一下，謝謝
uj5u.com熱心網友回復：
可以封裝公共的底部導航欄，變成一個公共組件引入，要改的時候改公共封裝的就行，不需要改10變
類似uniapp或者微信小程式這些都是有的配置的，可以參考一下
uj5u.com熱心網友回復：
并不是每個頁面都加，不知道你是用什么寫的移動端，反正總體思路是在入口的地方引入一下導航就行了
如果你是用的框架寫的，并且用router進行路由管理
我這是vue的，其他同理
寫法如下：
import footBar from '@/components/footbar.vue' 引入導航組件
<template>
<div>
<footBar></footBar>
</div>
</template>
這是每個頁面都參考的方法
如果要所有頁面都有就在app.vue這個入口檔案中引入組件就OK了
uj5u.com熱心網友回復：
現在是用Jquery Mobile框架去做移動頁面！現在就是每個html頁面都去加nav導航！
uj5u.com熱心網友回復：
那就在最初的那個入口檔案寫一次就好
uj5u.com熱心網友回復：
看你使用的什么框架，每個框架寫法不一樣
uj5u.com熱心網友回復：
那就寫一個底部導航的HTML，頁面加載的時候，用JS引入進去
那就寫一個公共的JS 在每個需要的頁面去參考js
(()=>{
$.ajax({
type:"GET",
url:"nav.html", //底部導航檔案
success:function(data) {
$("#nav").html(data);
}
error:function(){
alert("網路故障")
}
});
uj5u.com熱心網友回復：
好的??，謝謝！
但現在還有個問題就是每個頁面的Active顯示不同，例如：當點擊到【首頁】時，底部導航就要顯示【首頁】按鈕樣式為Active，表示當前在首頁。
uj5u.com熱心網友回復：
思路：nav 標簽系結點擊事件，切換樣式
例如：<div class="home">首頁</div>
.home{這里寫基礎樣式}
.active{選中時候的樣式}
$(".home").on("click",function(){
$(".home").addClass("active")
})
uj5u.com熱心網友回復：
好的，謝謝！
uj5u.com熱心網友回復：
母版頁就是做這個事的，頭部和底部都可以用母版頁搞；
只有中間的內容是各個頁面不同；
uj5u.com熱心網友回復：
母版頁？具體怎樣的？
uj5u.com熱心網友回復：
用什么框架不重要，都可以寫成template得形式，對應頁面參考，類似jq.load
引入html得template
uj5u.com熱心網友回復：
什么框架都不用的話，就一個JS生成底部DIV,寫好可以設定當前按鈕選中方法，其他頁面的JS呼叫就行了：
比如
導航欄JS
add(div)(
給傳入的div添加導航欄內容
);
setChoose(index){
設定選中
};
其他的頁面就寫一個DIV，然后JS呼叫add 和setChoose 吧
uj5u.com熱心網友回復：
現在提組件就是vue了嘛
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/10676.html
標籤：HTML5
上一篇：react-redux異步讀取資料?
下一篇：請教ASP如何從資料庫讀取新聞主題及id及內容？
