집 >웹 프론트엔드 >JS 튜토리얼 >Vue를 사용하여 탐색 탐색 모음을 구현하는 방법

Vue를 사용하여 탐색 탐색 모음을 구현하는 방법

亚连원래의: 2018-06-20 18:29:285184검색

이 글은 주로 vue 프로젝트의 네비게이션 바 구현 방법을 자세하게 소개하고 있습니다. 관심 있는 친구들이 참고할 수 있습니다.

모든 웹 페이지 프로젝트는 기본적으로 네비게이션 바에 필수적입니다. 위 내용 모두 작성 가능합니다. 하지만 코드가 적고 중복성이 낮은 코드를 작성하려면 두뇌를 사용하여 그것에 대해 생각해야 합니다.

최근에 하단에 네비게이션 바가 필요한 Baidu 지도 프로젝트를 작성했습니다. 자세한 내용은 다음과 같습니다.

우선 하단 내비게이션 바에 아이콘 사진이 모두 2가지 종류가 있습니다. 회색은 선택되지 않은 것을 나타내고 선택된 것은 샘플 색상의 그림으로 대체됩니다.

먼저 컴포넌트의 html 구조를 살펴보겠습니다. vue에서 제공하는 v-for 메소드를 사용하여 footNav 배열을 탐색하고 표시합니다. 배열에는 {title: "Bank", url: " ", url1: " "}이 포함되어 있습니다. 이미지의 src를 isSelect에 바인딩하고 현재 제목과 같으면 현재 탐색이 선택되어 표시됩니다. . 선택 시 이미지 URL1.

<p class="footer">
 <ul>
 <li v-for="item in footNav" @click="selectMapNav(item.title)">
  <img :src="isSelect === item.title ? item.url1 : item.url" alt="">
  <p>{{item.title}}</p>
 </li>
 </ul>
</p>

스타일은 확장 언어로 덜 작성해서 누구나 이해할 수 있어야 하고, 그냥 중첩되어 있을 뿐입니다. 이 영역에 너비를 100%로 추가하고 높이를 고정합니다. 하단에 표시해야 하기 때문에 고정 위치와 배경색을 추가합니다. 모바일 프로젝트를 작성 중인데 브라우저가 비교적 새롭기 때문에 호환성 문제를 고려할 필요가 없습니다. 굵은 플렉스 레이아웃은 네비게이션 바를 쉽게 구현할 수 있습니다.

.footer ul{
 width:100%;
 height:50px;
 position:fixed;
 bottom:0;
 z-index:1;
 background-color:#fff;
 display:flex;
 li{
 text-align:center;
 flex:1;
 img{height:23px;width:23px;margin-top:5px;}
 p{font-size:0.1rem;height:15px;line-height:10px;}
 }
}

'은행', 선택하지 않았을 때 표시되는 이미지 URL, 선택했을 때 이미지 url1 등 각 탐색 제목을 저장하는 배열을 vue data()에 정의합니다. isSelect는 현재 선택된 것을 의미하며 기본적으로 뱅크가 선택되어 있습니다.

isSelect: &#39;银行&#39;,
footNav: [{title: &#39;银行&#39;, url: &#39;../../../static/baiduMap/23@2x.png&#39;, url1: &#39;../../../static/baiduMap/22@2x.png&#39;},
 {title: &#39;公交 &#39;, url: &#39;../../../static/baiduMap/11@2x.png&#39;, url1: &#39;../../../static/baiduMap/10@2x.png&#39;},
 {title: &#39;地铁 &#39;, url: &#39;../../../static/baiduMap/13@2x.png&#39;, url1: &#39;../../../static/baiduMap/12@2x.png&#39;},
 {title: &#39;教育 &#39;, url: &#39;../../../static/baiduMap/15@2x.png&#39;, url1: &#39;../../../static/baiduMap/14@2x.png&#39;},
 {title: &#39;医院 &#39;, url: &#39;../../../static/baiduMap/17@2x.png&#39;, url1: &#39;../../../static/baiduMap/16@2x.png&#39;},
 {title: &#39;休闲 &#39;, url: &#39;../../../static/baiduMap/19@2x.png&#39;, url1: &#39;../../../static/baiduMap/18@2x.png&#39;},
 {title: &#39;购物 &#39;, url: &#39;../../../static/baiduMap/21@2x.png&#39;, url1: &#39;../../../static/baiduMap/20@2x.png&#39;}
]

메소드 메소드에서 호출되는 이벤트를 html로 작성합니다. html 구조 레이어의 클릭 이벤트 selectMapNav(item.title)을 통해 전달된 제목을 isSelect에 할당하여 탐색 모음의 클릭 상태 변경을 구현합니다.

selectMapNav (title) {
 this.isSelect = title }

최종 결과를 살펴보니 완벽하네요.

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue를 사용하여 탐색 탐색 모음을 구현하는 방법

관련 기사