功能实现
功能实现：点击A-Z中的任意字母跳转到对应其打头的城市列表，技术栈是nuxt.js
难点在于如何设计数据结构，所有的输出存储在vuex中，接下来为大家演示怎么实现
HTML代码
<template>
<div class="cont">
<dl class="m-categroy">
<dt>按字母顺序选择</dt>
<dd v-for="(item, index1) in list" :key="index1">
<a :href="'#city-' + item">{
{
item}}</a>
</dd>
</dl>
<dl v-for="(item, index2) in block" :key="index2" class="m-categroy-section">
<dt :id="'city-' + item.title">{
{
item.title}}</dt>
<dd>
<span v-for="(city, index3) in item.cities" :key="index3">{
{
city}}</span>
</dd>
</dl>
</div>
</template>
CSS代码
.m-categroy {
display: flex;
margin: 0 auto;
margin-bottom: 30px;
margin-top: 40px;
width: 1190px;
dt {
font-size: 16px;
color: #333;
font-weight: 500;
}
dd {
font-size: 15px;
color: #666;
margin: 0 6px;
width: 24px;
height: 24px;
padding: 4px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
border-radius: 50%;
&:hover {
background: #F8F8F8;
}
}
}
.m-categroy-section {
display: flex;
margin: 0 auto;
width: 1190px;
padding: 13px 30px 13px 10px;
border-radius: 10px;
&:hover {
background: #F8F8F8;
}
dt {
box-sizing: border-box;
vertical-align: top;
padding-top: 10px;
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: #13D1BE;
box-shadow: 0 4px 5px 0 rgba(39, 178, 164, .22);
}
dd {
flex: 1;
span {
margin: 10px 20px;
color: #666;
display: inline-block;
font-size: 14px;
}
}
}
vuex存储的数据
list: 'ABCDEFGHJKLMNQRSTWYZ'.split(''),
block:[
{
title: 'A',
cities: [
'鞍山',
'安阳',
'安顺',
'安庆',
'大连',
'大庆',
'丹东',
'大冶',
'大连',
'大庆',
'大同',
'丹东',
],
},
{
title: 'B',
cities: [
'北京',
'蚌埠',
'包头',
'保定',
'宝鸡',
],
},
{
title: 'C',
cities: [
'重庆',
'成都',
'长沙',
'长春',
'承德',
],
},
{
title: 'D',
cities: [
'大连',
'大庆',
'丹东',
'大冶',
'大同',
],
},
{
title: 'E',
cities: ['鄂尔多斯', '鄂州'],
},
{
title: 'F',
cities: ['佛山', ' 福州 ', '抚顺', '阜阳', '抚州', '防城港'],
},
{
title: 'G',
cities: [
'广州',
'贵阳',
'桂林',
'赣州',
'贵港',
'广元',
'广安',
'杭州',
'固原',
],
},
{
title: 'H',
cities: [
'呼和浩特',
'内蒙古',
'合肥安徽',
'海口',
'海南',
'邯郸',
'河北',
'湖州',
'黄山',
'黄石',
'黄冈',
'衡阳',
'汉中',
'菏泽',
'衡水',
'呼伦贝尔',
'葫芦岛',
'淮南',
'淮北',
'鹤壁',
'淮安',
'怀化',
'惠州',
'河源',
'贺州',
'河池',
'鹤岗',
'黑河',
],
},
{
title: 'J',
cities: [
'济南',
'吉林',
'九江',
'景德镇',
'金昌',
' 揭阳',
'吉安',
'锦州',
'鸡西',
'佳木斯',
'金华',
'济宁',
'焦作',
'荆州',
'荆门 ',
'娄底',
'江门',
'酒泉',
'嘉峪关',
],
},
{
title: 'K',
cities: [' 昆明 ', '开封', '克拉玛依', '嘉兴'],
},
{
title: 'L',
cities: [
'兰州',
'拉萨',
'洛阳',
'柳州',
'乐山',
'临沧',
'陇南',
' 丽江',
'乐山',
'连云港',
'廊坊',
'辽阳',
'辽源',
'泸州',
'漯河',
'来宾',
],
},
{
title: 'M',
cities: [
'绵阳',
'牡丹江',
'丽水',
'马鞍山',
'六安',
'龙岩',
'莱芜',
'临沂',
'聊城',
'茂名',
'梅州',
'眉山',
],
},
{
title: 'N',
cities: [
'南京',
'宁波',
'南通',
'南昌',
'南平',
'南阳',
'宁德',
'南宁',
'内江',
'南充',
],
},
]
//暂时只写了这些城市，需要更多城市，可以自行添加
js代码
<script>
import {
mapState } from 'vuex'
export default {
name: 'Category',
data() {
return {
}
},
computed: {
...mapState(['list', 'block']),
},
mounted() {
},
methods: {
},
}
</script>
谢谢观看，如有不足，敬请指教