image.png
参考网站： https://github.com/ustbhuangyi/better-scroll
npm install better-scroll --save
import BScroll from 'better-scroll'
<template>
<div>
<cityheader></cityheader>
<seader></seader>
<list :aases="aases" :bbses="bbses" ></list>
<alphabet :bbses="bbses"></alphabet>
</div>
</template>
<script>
// import axios from 'axios'
import cityheader from './components/header'
import seader from './components/seader'
import list from './components/list'
import alphabet from './components/alphabet'
import axios from 'axios'
export default {
name:'city',
components: {
cityheader,
seader,
list,
alphabet
},
data(){
return {
aases:{}, //热门城市
bbses:[] //字母表城市
}
},
methods:{
getcityinfo () {
axios.get('/static/mock/city.json')
.then(this.handlecityfo)
},
handlecityfo (res) {
res=res.data
if(res.ret&&res.data){
const data=res.data
this.aases=data.hotCities
this.bbses=data.cities
}
}
},
mounted () {
this.getcityinfo()
}
}
</script>
<style lang="stylus" scoped>
</style>
主体
<template>
<div class="list" ref="wraper">
<div class="">
<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" v-for="item of aases" :key="item.id" >
<div class="button"> {{item.name}}</div>
</div>
</div>
</div>
<div class="area" v-for="(item,key) of bbses" :key="key">
<div class="title border-topbottom">{{key}}</div>
<div class="item-list" >
<div class="item border-bottom"
v-for="instem of item"
:key="instem.id"
>
{{instem.name}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import bscroll from 'better-scroll'
export default {
name:'citylist',
props:{
aases:Array,
bbses:Object
},
mounted() {
this.scroll=new bscroll(this.$refs.wraper)
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.border-topbottom
&:before
border-color #cccccc
&:after
border-color #cccccc
.border-bottom
&:before
border-color #cccccc
.list
overflow hidden
position absolute
top 1.58rem
left 0
bottom 0
right 0
.title
line-height .54rem
background #eeeeee
padding-left .2rem
color #666
font-size .26rem
.button-list
padding .1rem 0.6rem .1rem .1rem
overflow hidden
.button-wrapper
float left
width 33.33%
padding .1rem
box-sizing border-box
.button
padding .1rem 0
text-align center
border 0.02rem solid #cccccc
border-radius 0.06rem
.item-list
.item
line-height .76rem
color #666
padding-left .2rem
</style>
滑动
<template>
<div class="list" >
<ul>
<li class="item"
v-for="item of lesttr"
:key="item"
:ref="item"
@touchstart="handtouchstart"
@touchmove="handletouchmove"
@touchend="handletouchend"
@click="handclick"
>{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
name:'cityalphabet',
props:{
bbses:Object
},
data(){
return{
touchstart:false,
starty:0,
tiemr:null
}
},
updated() {
this.starty=this.$refs['A'][0].offsetTop
},
computed:{
lesttr(){
const lesttr=[]
for(let i in this.bbses){
lesttr.push(i)
}
return lesttr
}
},
methods:{
handclick(e){
this.$emit('change',e.target.innerText)
},
handtouchstart(e){
this.touchstart=true
},
handletouchmove(e){
if(this.touchstart){
if(this.timer){ //move 截流操作
clearTimeout(this.tiemr)
}else{
this.timer=setTimeout(()=>{
// const starty= //获取第一个数字的离父元素的高度
const touchy=e.touches[0].clientY-79 //获取中间的高度
const indexr =Math.floor((touchy-this.starty)/20)//每一个字母的高度
if(indexr>=0 && indexr <this.lesttr.length ){
this.$emit('change',this.lesttr[indexr]) //触发事件
}
},20)
}
}
},
handletouchend(e){
this.handletouchend=false
}
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.list
display flex
flex-direction column
justify-content center
position absolute
right 0
top 1.6rem
bottom 0
width .4rem
.item
text-align center
line-height .44rem
color #000
</style>
网友评论