vue實現城市列表選擇

成果展現

最後的成果就是下面所展現的內容，由於gif圖沒有作，只能截圖所展現，接下來，會帶着你們一步一步的完成下面功能，腳手架搭建和node安裝在本次案例不會講解，若是瞭解，能夠在個人博客園找到有詳細介紹

準備工做：

　引入axios插件，調用better-scroll第三方插件，本地json文件，能夠參考目錄中的city.json,有條件的也能夠本身去扒

功能分析

1.獲取json數據展現城市列表 。

2.側邊字母定位滾動到相應的位置。

3.實現搜索城市

接下來咱們開始對組件進行劃分：本次案例中，總共劃分爲五個組件，下面就是組件的劃分圖

建立city組件，經過父組件獲取數據，傳遞給子組件

<template>
    <div class="city">
        <CityHeader></CityHeader>   //頭部
        <Search :list="cities"></Search>  //搜索
        <List :hot="hotCity" :letter="letter" :list="cities"></List> //城市列表
        <Alphabet @chang="handleLetterChang" :list="cities"></Alphabet>  //A-Z
    </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/Header'
import Search from './components/Search'
import List from './components/List'
import Alphabet from './components/Alphabet'
export default {
    data () {
        return {
            cities:{}, // 城市列表
            hotCity:[], //熱門城市
            letter: ''  // A-Z
        }
    },
    components: {
        CityHeader,
        Search,
        List,
        Alphabet
    },
    methods:{
        getCityInfo () {
            axios.get('/api/city.json').then(this.getCityInfoSucc)
        },
        getCityInfoSucc(res){
             res = res.data
            if (res.ret && res.data) {
                const data = res.data
                this.hotCity = data.hotCities
                this.cities = data.cities
            }
            console.log(this.cities)
        },
        handleLetterChang(letter) { //接受子組件傳過來的
//            console.log(letter)
            this.letter = letter
        }
    },
    mounted () {
        this.getCityInfo ()
    }
}
</script>

<style scoped lang="stylus">

</style>

City組件

把獲得的數據分次傳遞個對應的子組件，這樣有利於網站優化，不用頻繁的請數據

<template>
    <div class="city">
        <CityHeader></CityHeader>
        <Search :list="cities"></Search>
        <List :hot="hotCity" :letter="letter" :list="cities"></List>
        <Alphabet @chang="handleLetterChang" :list="cities"></Alphabet>
    </div>
</template>
export default {
    data () {
        return {
            cities:{}, // 城市列表
            hotCity:[], //熱門城市
            letter: ''  // A-Z
        }
    },
    components: {
        CityHeader,
        Search,
        List,
        Alphabet
    },
    methods:{
        getCityInfo () {
            axios.get('/api/city.json').then(this.getCityInfoSucc)   //請求本地配置的mock數據
        },
        getCityInfoSucc(res){
             res = res.data
            if (res.ret && res.data) {
                const data = res.data
                this.hotCity = data.hotCities
                this.cities = data.cities
            }
        }
    },
    mounted () {
        this.getCityInfo ()
    }
}

 

建立頭部組件，

<template>
    <div class="header">
        城市選擇
        <router-link to="/">
            <div class="iconfont back-icon">&#xe624;</div>
        </router-link>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped lang="stylus">
@import '~styles/varibles.styl';
@import '~styles/mixins.styl';
.header
    overflow: hidden
    height $headerHeight
    line-height: $headerHeight
    text-align: center
    color: #fff
    background: $bgColor
    font-size: .4rem
    .back-icon
        position: absolute
        left: 0
        top: 0
        width: .64rem
        font-size: .4rem
        text-align: center
        color: #fff
</style>

建立搜索組件頁面，接受父組件傳遞的數據，引入better-scroll第三方插件，實現列表滾動

<template>
    <div>
        <div class="search">
            <input v-model="keyword" class="search-input" type="text" placeholder="輸入城市名或者拼音" />
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li class="serach-item border-bottom" v-for="item in listItem" :key="item.id">{{item.name}}</li>
                <li v-show="hasNoData" class="serach-item border-bottom">沒有搜索到匹配的數據</li>
            </ul>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    props: {
          list: Object,
    },
    data() {
        return {
            keyword:'',
            listItem:[],
            timer:null
        }
    },
    computed: {
        hasNoData() {
            return !this.listItem.length  //沒有搜索的條件是否顯示
        }
    },
    watch: {
        keyword () {
            if (this.timer) {
                clearTimeout(this.timer)
            }
            if(!this.keyword) {  //清空
                this.listItem = ""
                return
            }
            this.timer = setTimeout(() => {
                const result = []
                for (let i in this.list) {
                    this.list[i].forEach((value) => {   //匹配搜索的條件
                        if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
                            result.push(value)
                        }
                    })
                }
                this.listItem= result
            },100)
        }
    },
    mounted () {
        this.scroll = new BScroll(this.$refs.search)
    }
}
</script>

<style scoped lang="stylus">
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.search
    height: .72rem
    padding: 0 .1rem
    background:$bgColor
    .search-input
        box-sizing: border-box
        width:100%
        height: .62rem
        line-height: .62rem
        text-align: center
        border-radius: .06rem
        padding: 0 .1rem
        color: #666
.search-content 
    z-index: 1
    overflow:hidden
    position:absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
    background: #eee
    .serach-item
        line-height: .62rem
        padding-left:.2rem
        color:#666
        background: #fff
</style>

建立城市列表組件，引入better-scroll插件，實現列表滾動，經過watch監聽letter，實現字母與城市列表滾動

<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" v-for="item in hot" :key="item.id">
                        <div class="button">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="area" 
                v-for="(item,key) in list" 
                :ref="key"
                :key="key">
                <div class="title border-topbottom">{{key}}</div>
                <ul class="item-list">
                    <li class="item border-bottom"
                         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 class="list">
        <li class="item"
            :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>

 以上都是全部本次的內容，若是喜歡能夠關注一下