[TOC] ## 1.安裝better-scroll ~~~ npm i better-scroll --save ~~~ 樣式結構要是better-scroll的樣式結構 ## 2.給word.vue的li點擊事件 > Tip:將li的內容傳遞給父組件 ~~~ <template> ? <div> ? ? ? <ul class="nav"> ? ? ? ? ? <li ? ? ? ? ? @click="handleClick" ? ? ? ? ? v-for="(item,index) of cities" :key="index">{{index}}</li> ? ? ? </ul> ? </div> </template> <script> export default { ? name:"CityWord", ? props:['cities'], ? methods:{ ? ? ? handleClick(event){ ? ? ? ? ? this.$emit("change",event.target.innerText) ? ? ? } ? } } </script> ~~~ ## 3.在父組件中接收參數 ~~~ <city-word :cities="cities" @change="handleChange"></city-word> methods:{ ? handleChange(word){ ? ? this.letter = word; ? } } //傳遞給list組件 <city-list :hotCities="hotCities" :cities="cities" :letter="letter"></city-list> ~~~ ## 4.List組件接收傳遞過來的參數 ~~~ export default { ? name:"CityList", ? props:['hotCities','cities','letter'] } ~~~ ## 5.使用watch函數監聽letter的改變 ~~~ export default { ? name:"CityList", ? props:['hotCities','cities','letter'], ? watch:{ ? ? ? letter(){ ? ? ? ? ? console.log(this.letter) ? ? ? } ? } } ~~~ ## 6.給List.vue中跳轉到的元素,ref ~~~ <div class="area" v-for="(item,index) of cities" :key="index" > ? ? ? ? ? <p class="title" :ref="index">{{index}}</p> ? ? ? ? ? <div class="list-city" v-for="(city,inx) of item" :key="inx">{{city.name}}</div> </div> ~~~ ~~~ //使用滾動組件滾動到對應的位置 import BScroll from "better-scroll"; export default { name: "CityList", props: ["hotCities", "cities", "letter"], watch: { ? letter() { ? ? if (this.letter) { ? ? ? const element = this.$refs[this.letter][0]; ? ? ? this.scroll.scrollToElement(element); ? ? } ? } }, mounted() { ? this.$nextTick(() => { ? ? this.scroll = new BScroll(this.$refs.wrapper, {}); ? }); } }; </script> ~~~