六十九、完成vue项目城市选择页，路由配置，搜索框布局、列表布局、betterscroll 的使用和字母表布局 -凯发ag旗舰厅登录网址下载

</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> <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需要使用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> <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 从零基础入门到实战项目开发

请一键三连！！！！！

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的六十九、完成vue项目城市选择页，路由配置，搜索框布局、列表布局、betterscroll 的使用和字母表布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。