vue 一個簡單的專案 之二 城市選擇頁面 step3
阿新 • • 發佈:2018-12-06
上篇,我們完成了城市選擇頁面頂部的佈局。本篇,我們來實現城市選擇頁面的列表佈局。
首先建立一個分支 city-list, pull 下來,在新分支上寫程式碼。
好啦。開啟編輯器,在city/components 中建立元件List.vue
初始化一下,List.vue 程式碼 如下。
<template> <div class="list"> list </div> </template> <script> export default { name: 'CityList' } </script> <style lang="stylus" scoped> @import '~styles/variables.styl' </style>
在City.vue 中,引入,如下。
<template> <div> <city-header></city-header> <city-search></city-search> <city-list></city-list> </div> </template> <script> import CityHeader from './components/Header.vue' import CitySearch from './components/Search.vue' import CityList from './components/List.vue' export default { name: 'City', components: { CityHeader, CitySearch, CityList } } </script> <style lang="stylus" scoped> </style>
最終,List.vue 如下。問題,裡面不能拖拽滾動,下篇將解決。
<template> <div class="list"> <div class="area"> <div class="title border-topbottom">當前城市</div> <div class="button-list"> <div class="button-wraper"> <div class="button">北京</div> </div> </div> </div> <div class="area"> <div class="title border-topbottom">熱門城市</div> <div class="button-list"> <div class="button-wraper"> <div class="button">北京</div> </div> <div class="button-wraper"> <div class="button">北京</div> </div> <div class="button-wraper"> <div class="button">北京</div> </div> <div class="button-wraper"> <div class="button">北京</div> </div> <div class="button-wraper"> <div class="button">北京</div> </div> </div> </div> <div class="area"> <div class="title border-topbottom">A</div> <div class="item-list"> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> </div> </div> <div class="area"> <div class="title border-topbottom">A</div> <div class="item-list"> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> </div> </div> <div class="area"> <div class="title border-topbottom">A</div> <div class="item-list"> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> <div class="item border-bottom">阿拉爾</div> </div> </div> </div> </template> <script> export default { name: 'CityList' } </script> <style lang="stylus" scoped> @import '~styles/variables.styl' .border-topbottom &:before border-color: #ccc &:after border-color: #ccc .border-bottom &:before border-color: #ccc .list position: absolute top: 1.58rem left: 0 right: 0 bottom: 0 overflow: hidden .title line-height: .44rem background: #eee padding-left: .2rem color: #666 font-size: .26rem .button-list overflow: hidden padding: .1rem .6rem .1rem .1rem .button-wraper float: left width: 33.33% .button text-align: center margin: .1rem padding: .1rem 0 border: .02rem solid #ccc border-radius: .06rem .item-list .item line-height: .76rem padding-left: .2rem </style>
Done.