前幾天謝了一個類似于通訊錄列表的城市列表選擇頁面,是運用vue 組件實現廢話不多說先上效果圖:

在這個頁面中實現了城市 頁面的布局,主要是實現了右邊從A-Z的列表,下面是實現的代碼

首先整個頁面是上下設置了overflow:hidden屬性,想要實現可以上下滑動的效果,我采用的是github上面 better-scroll組件,

? ? ? ?鏈接如下 github.com/ustbhuangyi…

? ?2. 具體的實現方法如下:

? ? ? ?首先是具體的布局

<div class="wrapper"><ul class="content"><li>...</li><li>...</li>...</ul><!-- you can put some other DOMs here, it won't affect the scrolling --> </div>復制代碼

? ? ? ?其次是具體的引用方式

import BScroll from 'better-scroll' const wrapper = document.querySelector('.wrapper') const scroll = new BScroll(wrapper)復制代碼

根據實際情況在項目中在mounted 這個鉤子函數中執行

mounted () { this.scroll =new BScroll (this.$refs.wrapper) },復制代碼

其中wrpper 是自己要滑動的內容區域,因此這樣就可以實現頁面上下滑動了

最后還剩下兩個 功能就是? 點擊相應的字母頁面滑動到對應自己的字母上, 這就用到better-scroll的另一個功能了??this.scroll.scrollToElement(elment)?

scrollToElememt接受的是一個DOM元素,那我們又是如何獲得每個傳入的dom元素呢

首先我們可以給每一個A-Z設置一個點擊事件,然后通過watch 來觀察其變化, this.letter是電機的字母

watch:{ letter () { if(this.letter) { const elment=this.$refs[this.letter][0]; console.log(elment) this.scroll.scrollToElement(elment) } } }復制代碼

然后通過

elment=this.$refs['Z'][0] 或者 elment=this.$refs['B'][0] 復制代碼

來獲得我們要跳轉的某一個字母的城市區域, 這樣就可以點擊字母滑動到指定位置.

第二個功能就滑動A-Z到達指定位置

首先我的頁面結構如下

<template> <div id="app"> <ListWrap :hotCities="hotCities" :cities="cities" :letter="letter" /> <CityList :cities="cities" @change="changeCity"/> </div></template>復制代碼

ListWrap 是城市列表組件, CityList 是右側A-Z組件

我計算的方式是? ?先要算出? A字符的距離頂部的offsetTop ,然后通過 e.touches[0].clientY來算出滑動截止手具體頂部的高度,然后雙方相減 就可得知 A字母到達最后滑動的字母的距離,然后除以每一個高度 向下取整,Math.floor()? 就可得知是是在A-Z字母數組中的下標,進而可得滑到那個字母的位置,下面是是代碼和效果圖

updated () { //獲取A點距離最外層 (此時是#APP)的offsetTop值 this.startY=this.$refs["A"][0].offsetTop +66 }, methods:{ handleClick(e){ this.$emit("change",e.target.innerText) }, handleTocuchStart () { this.touchStatus=true; }, handleTocuchMove (e) { if(this.touchStatus) { if(this.tiemr) { clearTimeout(this.tiemr) } /**函數節流 */ this.tiemr=setTimeout(() => { //此時是獲取手指移動結束后,到達頂部的高度 const touchY=e.touches[0].clientY; //向下取整,利用高度差除以每一個字母的高度來算出字母的下標 const index=Math.floor((touchY-this.startY)/21); if(index>=0&&index<this.letters.length){ this.$emit("change",this.letters[index]) } }, 16); } },復制代碼

最后獲得字母之后根據scrollToElemem.來滑動到相應的城市.

謝謝大家深知自己能力一般,寫這些只為記錄自己遇到的問題,有時候可能表述不清楚自己的意圖,還請諒解,下面是自己寫的demo的網址請大家指教:

github.com/cuirongjin/…

總結

以上是生活随笔為你收集整理的城市列表选择页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。