成都創(chuàng)新互聯(lián)公司2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元臨城做網(wǎng)站,已為上家服務(wù),為臨城各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

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

? }

? }

}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：兄弟組件之間聯(lián)動(dòng)--vue開(kāi)發(fā)app點(diǎn)擊字母展示地區(qū)列表-創(chuàng)新互聯(lián)
新聞來(lái)源：http://weahome.cn/article/hesog.html