怎麼實現通訊錄字母表

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>