2020/10/28、 周三、今天又是奮斗的一天。

@Author：Runsen

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！

今天將完成Vue項目城市選擇頁，路由配置，搜索框布局、列表布局、BetterScroll 的使用和字母表布局。

文章目錄

• 定義City父組件
• Home\Header添加路由
• Header.vue
• Search.vue
• List.vue
• Alphabet.vue

定義City父組件

首先，定義一個新的父組件。

Home\Header添加路由

Header.vue

<template><div class="header">城市選擇<!-- 定義一個返回Home的路由 --><router-link to="/"><div class="iconfont header-back">&#xe624;</div></router-link></div> </template><script> export default {name: 'CityHeader' } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.headerposition: relativeoverflow: hiddenheight: $headerHeightline-height: $headerHeighttext-align: centercolor: #fffbackground: $bgColorfont-size: .32rem.header-backposition: absolutetop: 0left: 0width: .64remtext-align: centerfont-size: .4remcolor: #fff </style>

Search.vue

<template><div class="search"><input class="search-input" type="text" placeholder="輸入城市名或拼音" /></div> </template><script> export default {name: 'CitySearch' } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.searchheight: .72rempadding: 0 .1rembackground: $bgColor.search-inputbox-sizing: border-boxwidth: 100%height: .62rempadding: 0 .1remline-height: .62remtext-align: centerborder-radius: .06remcolor: #666 </style>

List.vue

再List.vue需要使用BetterScroll 。

BetterScroll 是一款重點解決移動端各種滾動場景需求的開源插件（GitHub地址:https://github.com/ustbhuangyi/better-scroll），有下列功能支持滾動列表，下拉刷新，上拉刷新，輪播圖，slider等功能。

安裝：npm install better-scroll -S

<template><div class="list" ref="wrapper"><div><div class="area"><div class="title border-topbottom">當前城市</div><div class="button-list"><div class="button-wrapper"><div class="button">北京</div></div></div></div><div class="area"><div class="title border-topbottom">熱門城市</div><div class="button-list"><div class="button-wrapper"><div class="button">北京</div></div><div class="button-wrapper"><div class="button">北京</div></div><div class="button-wrapper"><div class="button">北京</div></div><div class="button-wrapper"><div class="button">北京</div></div><div class="button-wrapper"><div class="button">北京</div></div><div class="button-wrapper"><div class="button">北京</div></div><div class="button-wrapper"><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 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 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 class="item border-bottom">阿拉爾</div></div></div></div></div> </template><script> import Bscroll from 'better-scroll' export default {name: 'CityList',mounted () {this.scroll = new Bscroll(this.$refs.wrapper)} } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.border-topbottom&:beforeborder-color: #ccc&:afterborder-color: #ccc.border-bottom&:beforeborder-color: #ccc.listoverflow: hiddenposition: absolutetop: 1.58remleft: 0right: 0bottom: 0.titleline-height: .54rembackground: #eeepadding-left: .2remcolor: #666font-size: .26rem.button-listoverflow: hiddenpadding: .1rem .6rem .1rem .1rem.button-wrapperfloat: leftwidth: 33.33%.buttonmargin: .1rempadding: .1rem 0text-align: centerborder: .02rem solid #cccborder-radius: .06rem.item-list.itemline-height: .76rempadding-left: .2rem </style>

Alphabet.vue

<template><ul class="list"><li class="item">A</li><li class="item">A</li><li class="item">A</li><li class="item">A</li><li class="item">A</li><li class="item">A</li><li class="item">A</li></ul> </template><script> export default {name: 'CityAlphabet' } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'.listdisplay: flexflex-direction: columnjustify-content: centerposition: absolutetop: 1.58remright: 0bottom: 0width: .4rem.itemline-height: .4remtext-align: centercolor: $bgColor </style>

參考課程：慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發

請一鍵三連！！！！！

總結

以上是生活随笔為你收集整理的六十九、完成Vue项目城市选择页，路由配置，搜索框布局、列表布局、BetterScroll 的使用和字母表布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。