城市列表:
A列表
代码如下:
<template> <div class="list"> <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> </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 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 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> </template>css样式
<style lang="stylus" scoped> .border-topbottom &:before border-color #ccc &:after border-color #ccc .border-bottom &:before border-color #ccc .list overflow hidden position absolute top 1.58rem left 0 right 0 bottom 0 .title height .72rem line-height .72rem background #f5f5f5 color #212121 padding-left .2rem .button-list overflow hidden padding .1rem .6rem .1rem .1rem .button-wrapper float left width 33.3% .button margin .1rem padding .1rem border .02rem solid #ccc text-align center border-radius .06rem .item-list .item line-height .72rem padding-left .2rem </style>
better-scroll使用
首先。安装betterscrolld
npm i better-scroll --save
然后,引入betterscroll
到这里,页面类似于原生的滚动条就完成了。
下面是字母列表的实现了。
这里的页面很简单就不说明了。写个关键点:
最后实现效果如下: