vue搜索好友_Vue实现类似通讯录功能(中)
本來想一篇文章寫完,但是又截圖又分析什么的,如果用一篇文章寫,太長(zhǎng)了,估計(jì)都沒耐心看完,所以分成了幾篇來寫。
這篇主要說的是實(shí)現(xiàn)點(diǎn)擊右側(cè)字母索引,左邊能自動(dòng)滾動(dòng)到相應(yīng)城市功能。
兄弟組件聯(lián)動(dòng)
去字母索引組件的循環(huán)的li部分添加一個(gè)點(diǎn)擊事件,這個(gè)點(diǎn)擊事件接收一個(gè)e的事件對(duì)象,拿到事件對(duì)象,可以先打印e.target.innerText,這個(gè)時(shí)候去瀏覽器看看。
點(diǎn)擊的都會(huì)打印出來
此時(shí)點(diǎn)擊字母索引中的任意一個(gè)字母,控制臺(tái)會(huì)打印出相應(yīng)字母的文字。
此時(shí)我們希望將字母?jìng)鹘olist組件,(list組件就是城市列表組件)然后讓list對(duì)應(yīng)的區(qū)塊顯示出來。
list組件和字母索引組件是兄弟組件,這里就涉及到兄弟組件的傳值,它們是非父子組件,可通過bus總線的形式來傳值。
由于這里傳遞的數(shù)據(jù)比較簡(jiǎn)單,就是ABCD...,并且組件的層級(jí)不深,所以我們可以將字母索引組件的值傳遞給City這個(gè)父組件,然后父組件再傳給list,這里的兄弟組件傳值就變成了子組件傳給父組件,父組件再傳給另一個(gè)子組件的形式了。
字母索引組件傳值給City父組件
給li定義一個(gè)點(diǎn)擊事件,當(dāng)點(diǎn)擊字母的時(shí)候,向父組件派發(fā)一個(gè)change事件,這個(gè)事件帶的內(nèi)容就是e.target.innerText,
派發(fā)事件
然后去City父組件接收這個(gè)事件,用名為handleLetterChange的函數(shù)來接收@change事件。
接收一下事件
接收函數(shù)打印一下帶來的參數(shù)內(nèi)容letter
打印一下帶來的參數(shù)內(nèi)容
當(dāng)我們點(diǎn)擊字母的時(shí)候,字母在控制臺(tái)被打印出來,由City組件打印出來的,也就表明了 父組件成功接收了子組件傳過來的消息。
成功打印
City父組件再將內(nèi)容轉(zhuǎn)發(fā)給list組件
父組件通過綁定屬性的形式傳給子組件數(shù)據(jù),先在父組件的data部分定義一個(gè)letter的變量,為空,也就是letter: '',
然后再去handleLetterChange函數(shù)中讓this.letter = letter,也就是讓傳過來的參數(shù)賦值給本地的letter,再給list組件綁定一個(gè)letter屬性,將本地的letter傳遞過去。
然后list子組件去接收這個(gè)letter。
接收后的邏輯
接收到letter要怎樣呢?
當(dāng)list的組件發(fā)現(xiàn)letter有改變的時(shí)候,讓組件顯示的列表項(xiàng)和letter相同的首字母列表項(xiàng)顯示出來。
在這里要借助一個(gè)偵聽器watch,監(jiān)聽letter,一旦它變化了,就要做點(diǎn)事了。
比如說當(dāng)letter變的時(shí)候,將它打印出來:
watch監(jiān)聽letter
一旦letter發(fā)生改變,就會(huì)執(zhí)行這段代碼:
成功監(jiān)聽到
在watch這個(gè)偵聽器具體做什么呢?
如果letter不為空的時(shí)候,調(diào)用betterScroll的一個(gè)方法,讓better-scroll自動(dòng)滾動(dòng)到某個(gè)元素上,外部傳一個(gè)A,就滾動(dòng)到A區(qū)域上。
就是我這個(gè)方法
怎么做呢?
首先,去循環(huán)處拿到dom節(jié)點(diǎn),還記得上篇說的兩層循環(huán)嗎?這里要拿的就是父級(jí)循環(huán)的ABCD的值,通過:ref="key",記住這里是:ref而不是ref,意思是要綁定key的值。
拿到父級(jí)循環(huán)的abcd
然后去watch偵聽器獲取這層dom結(jié)構(gòu),定義element來接收它。
this.$refs[this.letter]的的意思是,原本我們要獲取某層dom是這樣寫的:
模板處:ref="xxx"
script部分: this.$refs.xxx
但是這里模板處是綁定的值
模板處: :ref="xxx"
script部分: this.$refs.xxx 這里原本應(yīng)該是這樣寫的,
在js中xx.xxx 和xx[xxx]是一個(gè)意思,
所以也可以改寫為this.$refs[xxx],xxx應(yīng)該為傳入的letter值,因?yàn)檫@里的xxx是綁定的值
就像這樣
好啦,理想很豐滿,現(xiàn)實(shí)很骨感。本來理論上應(yīng)該就是這么寫就可以了,但是當(dāng)我們打印出來element的值,它居然不是一個(gè)dom對(duì)象!!而是一個(gè)數(shù)組:
變成了數(shù)組了
為啥?因?yàn)槲覀兊膔ef是一個(gè)循環(huán)輸出的ref,使用循環(huán)輸出的ref的時(shí)候,它其實(shí)是一個(gè)數(shù)組。真正的dom元素在我標(biāo)框框的地方。或取它也就是獲取下標(biāo)0的內(nèi)容就行了
效果粗剪版
拿到之后,將這個(gè)dom元素傳給scrollToElement里。
到這里,點(diǎn)擊A,A部分內(nèi)容就出來了,粗剪版的效果就完成了。
下一篇說,滑動(dòng)右側(cè)字母索引,左側(cè)對(duì)應(yīng)滑動(dòng),做一個(gè)字母索引的滾動(dòng)監(jiān)聽。
總結(jié)
以上是生活随笔為你收集整理的vue搜索好友_Vue实现类似通讯录功能(中)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 苹果 MacBook Pro 曝光“灰尘
- 下一篇: mockjs vue ajax,mock