本篇内容介绍了“JS如何基于VUE组件实现城市列表效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
本文实例为大家分享了基于VUE组件实现城市列表效果的具体代码，供大家参考，具体内容如下
基本思想是，将城市列表数据缓存在本地
然后在页面上用JS实现即时模糊查询和首字母定位查询等
为了保护项目，删除了部分代码
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" : 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()
})
},
// 侧边字母定位滚动到相应的位置
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 = '查询不到结果'
_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>“JS如何基于VUE组件实现城市列表效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
