JS基于VUE組件實(shí)現(xiàn)城市列表效果
更新時間：2021年08月20日 11:19:54 作者：駿骨銀蹄
這篇文章主要為大家詳細(xì)介紹了JS基于VUE組件實(shí)現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了基于VUE組件實(shí)現(xiàn)城市列表效果的具體代碼，供大家參考，具體內(nèi)容如下
- 基本思想是，將城市列表數(shù)據(jù)緩存在本地
- 然后在頁面上用JS實(shí)現(xiàn)即時模糊查詢和首字母定位查詢等
- 為了保護(hù)項(xiàng)目，刪除了部分代碼
效果
實(shí)現(xiàn)
H5：
<template>
<div id="city">
<div class="search-city-back">
<div class="search-city">
<img src="../assets/img/Shop/search.png">
<input type="text" placeholder="請輸入城市名稱" v-model="citySearch">
<a @click="citySearch=''" href="javascript:;" class="img-del" v-show="citySearch"></a>
</div>
</div>
<div class="city-content">
<div id="showCityContent"></div>
<div class="letter-item" v-if="showCity&&sourcePageType===1">
<div></div>
<div @click="cityChoose('*','全國')">全國</div>
</div>
<div v-for="(val,key) in showCity" class="letter-item">
<div><a :id="key">{{key}}</a></div>
<div v-for="i in val">
<div :class="{'city-hide': i.Code==='*'&&sourcePageType===3}" class="item-buttom"
@click="cityChoose(i.Code,i.Name)">{{i.Name}}
</div>
</div>
</div>
</div>
<aside class="letter-aside" :style="{color: config.letterColor}" v-if="showCity">
<ul>
<!--<li>定位</li>-->
<!--<li>熱門</li>-->
<li v-for="(val,key) in showCity" @click="naver(key)">{{key}} </li>
</ul>
</aside>
<div id="tip">{{tipString}}</div>
</div>
</template>
JS：
<script>
import {GetCityList} from 'service'
import {setTitle, setSessionStore, getSessionStore} from '../utils/method'
export default{
name: 'CityList',
data () {
return {
citysAllSSKey: 'XMall-Component-AllCityList', // 所有城市的會話緩存
citys: [],
showCity: null,
tipString: null,
letter: null,
citySearch: '',
sourcePageType: 1
}
},
props: {
config: {
type: Object,
default: () => {
return {
letterColor: '#f44f0f',
}
}
},
pageType: {
type: Number,
default: 1 // 1:全國城市列表
},
shopId: {
type: String,
default: null
}
},
watch: {
citySearch: function () {
this.cityFilter()
}
},
created: function () {
setTitle('選擇城市')
},
mounted: function () {
this.into()
},
methods: {
into(){
this.sourcePageType = parseInt(this.$props.pageType)
if (this.sourcePageType === 1) {
this.citys = JSON.parse(getSessionStore(this.citysAllSSKey))
if (this.citys) {
this.showCity = this.citys
} else {
this.getAllCityList()
}
}
},
// 獲取全國城市列表
getAllCityList: function () {
// 顯示loading
this.$vux.loading.show({text: '加載中'})
GetCityList(
{
keyword: ''
},
(res) => {
this.citys = res
this.showCity = res
// 隱藏loading
this.$vux.loading.hide()
setSessionStore(this.citysAllSSKey, res)
}, (err) => {
console.log(err)
// 隱藏loading
this.$vux.loading.hide()
})
},
// 側(cè)邊字母定位滾動到相應(yīng)的位置
naver: function (letter) {
this.tipString = letter
let obj = document.getElementById(letter)
let tip = document.getElementById('tip')
tip.setAttribute('class', 'tipAppear')
setTimeout(function () {
tip.removeAttribute('class')
}, 500)
let oPos = obj.offsetTop
return window.scrollTo(0, oPos - 36)
},
// 城市搜索
cityFilter: function () {
let nodata = true
if (this.citySearch) {
// 遍歷對象，選出符合條件的值
let showCityNew = {}
for (let key in this.citys) {
let arrayNew = []
for (let value of this.citys[key]) {
if (value.Name.indexOf(this.citySearch) > -1) {
arrayNew.push(value)
}
}
if (arrayNew.length > 0) {
showCityNew[key] = arrayNew
nodata = false
}
}
this.showCity = showCityNew
} else {
this.showCity = this.citys
nodata = false
}
if (nodata) {
this.showCity = null
let _showCityContent = document.getElementById('showCityContent')
_showCityContent.innerText = '查詢不到結(jié)果'
_showCityContent.setAttribute('class', 'tipShow')
} else {
document.getElementById('showCityContent').innerText = ''
}
},
// 城市選擇
cityChoose: function (code, name) {
this.$emit('chooseCity', {Code: code, Name: name})
}
}
}
</script>
CSS：
<style lang="scss" scoped>
#city {
position: relative;
background: #f6f4f5;
}
#city{
.city-content {
padding: 60px 0 0 0;
}
.letter-item{
background-color: #fff;
}
.letter-item > div:first-child {
color: #999;
background: #f6f4f5;
margin-right: 30px;
}
.letter-item > div {
color: #333;
line-height: 45px;
font-size: 14px;
padding: 0 30px 0 15px;
background-color: #fff;
}
.letter-item .item-buttom {
border-bottom: 1px solid #e6e6e6;
}
.letter-aside {
position: fixed;
right: 5px;
top: 5.3rem;
}
.letter-aside ul {
list-style: none;
line-height: 1.4em;
font-size: 14px;
text-align: center;
}
#tip {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid #333333;
width: 100px;
height: 100px;
z-index: 10;
text-align: center;
line-height: 100px;
font-size: 50px;
opacity: 0;
}
.tipAppear {
animation: appearTip 1 linear 0.5s;
}
@-webkit-keyframes appearTip {
0% {
opacity: 1;
}
80% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
@keyframes appearTip {
0% {
opacity: 1;
}
80% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
.search-city-back {
width: 100%;
position: fixed;
background-color: #f6f4f5;
max-width: 414px;
}
.search-city {
height: 30px;
line-height: 30px;
padding: 0 15px;
border-radius: 14px;
margin: 12px 15px;
background-color: #ffffff;
}
.search-city img {
height: 18px;
width: 18px;
}
.search-city input {
width: 80%;
margin-left: 5px;
line-height: 24px;
border-radius: 5px;
outline: none;
font-size: 15px;
}
.tipShow {
text-align: center;
line-height: 60px;
font-size: 16px;
color: #bbbbbb;
}
.city-hide {
display: none;
}
.img-del {
width: 16px;
height: 16px;
position: absolute;
top: 19px;
right: 30px;
background-color: rgba(0, 0, 0, .2);
border-radius: 8px;
}
.img-del::before, .img-del::after {
content: ' ';
width: 0;
height: 50%;
position: absolute;
top: 4px;
right: 7px;
border-right: 1px solid #fff;
}
.img-del::before {
transform: rotate(45deg);
}
.img-del::after {
transform: rotate(-45deg);
}
}
</style>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS使用replace()方法和正則表達(dá)式進(jìn)行字符串的搜索與替換實(shí)例
這篇文章主要介紹了JS使用replace()方法和正則表達(dá)式進(jìn)行字符串的搜索與替換實(shí)例,需要的朋友可以參考下2014-04-04
本篇文章主要介紹了two.js之實(shí)現(xiàn)動畫效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了在微信小程序中使用vant的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
主頁用frameset嵌了兩個頁面，左側(cè)為菜單欄，可以通過改變 frameset的cols來收縮。別的瀏覽器正常，但I(xiàn)E10卻沒任何的反應(yīng)2014-01-01
top.location.href 沒有權(quán)限 解決方法
以前好像沒有遇到這問題，也可能是沒有在意吧，我的blog內(nèi)容頁都是有判斷的，規(guī)則是，如果top.location不是內(nèi)容頁的話就跳到內(nèi)容頁2008-08-08
javascript和jquery實(shí)現(xiàn)用戶登錄驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了javascript和jquery分別實(shí)現(xiàn)用戶登錄驗(yàn)證的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
JS實(shí)現(xiàn)的input選擇圖片本地預(yù)覽功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的input選擇圖片本地預(yù)覽功能,涉及javascript針對頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
這篇文章主要給大家介紹了ES6中Class和Module的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
addeventlistener監(jiān)聽scroll跟touch(實(shí)例講解)
下面小編就為大家?guī)硪黄猘ddeventlistener監(jiān)聽scroll跟touch(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript微信定位功能實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript微信定位功能實(shí)現(xiàn)方法,將定位到的經(jīng)緯度轉(zhuǎn)換為百度地圖對應(yīng)的經(jīng)緯度，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11