<template> <div ref="wrapper"> <div> <div> <div>当前城市</div> <div> <div> <div>郑州</div> </div> </div> </div> <div> <div>热门城市</div> <div> <div v-for="item in hot" :key="item.id"> <div>{{item.name}}</div> </div> </div> </div> <div v-for="(item,key) in list" :ref="key" :key="key"> <div>{{key}}</div> <ul> <li v-for="listInner in item" :key="listInner.id" >{{listInner.name}}</li> </ul> </div> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { props: { hot: Array, list: Object, letter:String }, mounted () { this.scroll = new BScroll(this.$refs.wrapper) }, watch:{ letter () { //监听列表滚动事件 A-Z if(this.letter) { const element = this.$refs[this.letter][0] this.scroll.scrollToElement(element) } } } } </script> <style scoped lang="stylus"> @import '~styles/varibles.styl'; @import '~styles/mixins.styl'; .border-topbottom &:before background: #ccc &:after background:#ccc .border-bottom &:before background: #ccc .list overflow: hidden position:absolute top:1.58rem left:0 right:0 bottom:0 .title line-height: .54rem; background: #eee; padding-left: .2rem; color: #666; font-size: .26rem; .button-list overflow:hidden padding: .1rem .6rem .1rem .1rem .button-wrapper float:left width:33.33% .button margin: .1rem padding: .1rem 0 text-align: center border: .02rem solid #ccc border-radius: .06rem .item-list .item line-height: .76rem color:#212121 padding-left: .2rem font-size: .28rem text-overflow: ellipsis white-space: nowrap </style>
创建字母组件，点击字母，左边列表城市想对应，通过this.$emit事件，子组件在触发的事件传递给父组件，父组件通过子组件传递的事件，在传递给List组件，
<template> <div> <li :ref="item" @click="handeClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend= "handleTouchEnd" v-for="item of letter" :key="item">{{item}}</li> </div> </template> <script> export default { props: { list: Object }, data () { return { touchstart:false, startY:0, timer: null } }, updated () { this.startY = this.$refs['A'][0].offsetTop }, computed: { letter () { const letter =[] for (let i in this.list) { //循环A-Z letter.push(i) } return letter } }, methods: { handeClick(e) { this.$emit('chang',e.target.innerText) //传给父组件City }, handleTouchStart () { // 手指放上 this.touchstart = true }, handleTouchMove (e) { // 手指移动 if(this.touchstart) { if(this.timer) { clearInterval(this.timer) } this.timer = setTimeout(() => { const touchY = e.touches[0].clientY -79 //到蓝色头部的距离 const index = Math.floor((touchY - this.startY ) / 20) if(index >=0 && index < this.letter.length) { this.$emit('chang',this.letter[index]) } },16) } }, handleTouchEnd () { // 手指离开 this.touchstart = false } } } </script> <style scoped lang="stylus"> @import '~styles/varibles.styl'; @import '~styles/mixins.styl'; .list display: flex flex-direction:column justify-content: center position:absolute top: 1.58rem right: 0 bottom: 0 width: .4rem .item line-height:.44rem text-align: center color: $bgColor list-style:none </style>
总结