創(chuàng)新互聯(lián)專注于成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營(yíng)銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對(duì)待客戶，用專業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

下圖這種地區(qū)搜索方式在很多app中都很常見(jiàn)，今天就使用vue框架中的 better-scroll 第三方包來(lái)實(shí)現(xiàn)頁(yè)面滾動(dòng)和點(diǎn)擊側(cè)邊欄字母該字母開頭的地區(qū)列表置頂功能。

來(lái)源：凱哥Java(kaigejava)

1、A子組件通過(guò)使用 this.$emit(事件名字，事件攜帶內(nèi)容) 向外觸發(fā)事件

首先，在組件每個(gè)字母元素上綁定事件，在該事件中向外觸發(fā)事件，并將值傳遞出去：

methods:{

? ? handleLetterClick(e){

? ? ? ? this.$emit('change',e.target.innerText)

? ? }

}

2、父組件接收A組件傳過(guò)來(lái)的事件，并通過(guò)屬性來(lái)向B組件傳值

因?yàn)?city-alphabet>組件傳遞過(guò)來(lái)的是單個(gè)字符串，所以，先在data中定義一個(gè)屬性letter來(lái)接收這個(gè)值；

聯(lián)系凱哥-》凱哥Java(kaigejava)

或凱哥個(gè)人博客：www.kaigejava.com

悄悄說(shuō)下，凱哥個(gè)人博客可以私信凱哥哦~

并在父組件模板中的組件中定義傳遞的方法@change="handleLetterChange"用來(lái)獲取傳遞的值；

將letter屬性傳遞給另一個(gè)子組件；

data(){

? ? return{

? ? ? ? letter:''

? ? }

},

methods:{

? ? handleLetterChange(letter){

? ? ? ? this.letter = letter

? ? }

},

3、B組件接收父組件傳遞過(guò)來(lái)的屬性，并通過(guò)watch監(jiān)聽(tīng)參數(shù)的變化，然后執(zhí)行頁(yè)面的滾動(dòng)顯示

首先，給每個(gè)地址列表區(qū)域元素加 ref ，better-scroll會(huì)根據(jù)ref給指定區(qū)域進(jìn)行操作；

然后使用watch監(jiān)聽(tīng)letter變化，并使用better-scroll中的scrollToElement接口執(zhí)行頁(yè)面滾動(dòng)；

props:{

? ? letter:String

},

watch:{

? ? letter(){

? ? ? ? if(this.letter){

? ? ? ? ? ? // scrollToElement里只接受單個(gè)DOM元素，不接收數(shù)組

? ? ? ? ? ? //因?yàn)樯厦娴膁iv元素是數(shù)組渲染出來(lái)的，所以這里this.$refs得到的是數(shù)組

? ? ? ? ? ? const element = this.$refs[this.letter][0]

? ? ? ? ? ? this.scroll.scrollToElement(element)

? ? ? ? }

? ? }

}