JS基于VUE组件实现城市列表效果
更新时间：2021年08月20日 11:19:54 作者：骏骨银蹄
这篇文章主要为大家详细介绍了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" :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()
})
},
// 侧边字母定位滚动到相应的位置
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之文本框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
本文是在Web中通过Javascript判断键盘按键事件，并改变按键的默认动作。2009-02-02
JS pushlet XMLAdapter适配器用法案例解析
这篇文章主要介绍了JS pushlet XMLAdapter适配器用法案例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
Javascript实现快速排序（Quicksort）的算法详解
排序算法（Sorting algorithm）是计算机科学最古老、最基本的课题之一，要想成为合格的程序员，就必须理解和掌握各种排序算法。2015-09-09
这篇文章主要介绍了详解Typescript 内置的模块导入兼容方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
下面小编就为大家带来一篇通过构造函数实例化对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
ES6允许按照一定模式从数组或对象中提取值，然后对变量进行赋值，称为解构。只要等号两边的模式相同，左边的变量就会被赋予对应的值，这种写法属于“模式匹配”。统称起来就叫做“解构赋值”。2021-05-05
Base64是一种用64个字符来表示任意二进制数据的方法，这篇文章主要为大家介绍了如何实现将图片转为base64格式，感兴趣的小伙伴可以学习一下2023-07-07
这篇文章主要介绍了微信小程序 接入腾讯地图的两种写法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了jQuery实现为控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源码供读者下载参考,需要的朋友可以参考下2015-12-12
最新评论