新手首次嘗試用JavaScript開發h5底部導航組件
簡單用css美化了
用js創建多個項
也是用的js寫的點擊事件系結
html代碼塊
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title></title>
</head>
<body>
<div class="iweb-tab">
<!--當前為iwebTAB 純js開發-->
</div>
</body>
</html>
css代碼塊
*{margin:0px;}
.iweb-tab{
box-shadow: 2px 3px 10px #6C63FF;
height: 50px;
width: 100%;
display: flex;
background: #6C63FF;
position: fixed;
bottom: 0px;
}
.iweb-tab div{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
}
.iweb-tab div img{
height: 40%;
width: 40%;
}
.iweb-tab div:hover{
background: rgb(160,150,255);
margin: 5px;
border-radius: 5px 5px 0px 0px;
}
js代碼塊
var tab = {
"NewTab":function(per){
var len = per.length-1;
for(var i = 0;i <= len;i++){
var object = document.querySelector(".iweb-tab");
object.innerHTML=object.innerHTML+"<div iweb-click='"+per[i].id+"'><img src='"+per[i].img+"' alt='' />"+per[i].text+"</div>";
}
},
"Bclick":function(per){
//console.log("[iweb-click="+per.id+"]")
var obj = document.querySelector("[iweb-click="+per.id+"]")
if(obj){
obj.onclick=function(){
per.fun()
}
}else{
console.log("當前iwebID未注冊")
}
}
}
tab.NewTab([
{
"id":"index",
"text":"主頁",
"img":"https://isometric.online/wp-content/uploads/2020/04/cloud_database_svg.svg"
},
{
"id":"msg",
"text":"訊息",
"img":"https://isometric.online/wp-content/uploads/2020/03/drone_delivery_svg.svg"
},
{
"id":"word",
"text":"云夢組件",
"img":"#"
}
])
tab.Bclick({
"id":"index",
"fun":function(){
alert("當前點擊的是"+this.id+"頁面")
}
})
tab.Bclick({
"id":"msg",
"fun":function(){
alert("當前點擊的是"+this.id+"頁面")
}
})
//這里添加系結id為word的項事件
tab.Bclick({
"id":"word",
"fun":function(){
alert("--當前為iwebTAB--")
}
})
基本就這樣了
歡迎幫我改進
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/319793.html
標籤：其他