安装Better-scroll插件:
npm install better-scroll --save
查看github发现使用better-scroll,需要元素符合以下这种结构:
<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- you can put some other DOMs here, it won't affect the scrolling </div>
所以需要修改下代码,在list里面在加一层div:
<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> </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 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> </div> </template>
然后需要引入使用better-scroll
<div class="list" ref="wrapper"> <script> import Bscroll from 'better-scroll' export default { name: 'CityList', mounted () { this.scroll = new Bscroll(this.$refs.wrapper) } } </script>
这时刷新页面可以实现上拉下拉了,还有一个弹性动画的效果。
下面继续来实现右侧字母表区域
首先,我们单独创建一个组件Alphabet.vue:
<template> <div class="list"> <ul> <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> </div> </template> <script> export default { name: 'CityAlphabet' } </script> <style lang="stylus" scoped> @import '~styles/varibles.styl' .list display:flex justify-content:center align-items:center position:absolute top: 1.58rem right: 0 bottom: 0 .4rem .item line-height:.4rem color:$bgColor </style>
然后在City.vue里引用组件:
<template> <div> <city-header></city-header> <city-search></city-search> <city-list></city-list> <city-alphabet></city-alphabet> </div> </template> <script> import CityHeader from './components/Header' import CitySearch from './components/Search' import CityList from './components/List' import CityAlphabet from './components/Alphabet' export default { name: 'City', components: { CityHeader, CitySearch, CityList, CityAlphabet } } </script>
此时效果图:
提交代码并合并:
git add .
git commit -m "城市列表完成基本布局"
git push
git checkout master
git merge city-list
git push