项目主体:
cli2版本项目框架,数据信息为json模拟数据。引用Swiper 3轮播组件以及阿里巴巴矢量图标库。
首页:
头部为Herd组件输入框及阿里左箭头图标,display弹性布局。右侧地理位置数据为存储在vuex中动态变量,在位置页面点击选中当前地址时使用映射函数调用mutations中的方法进行传参(当前地址数据)并改变动态变量重新赋值
轮播图:引用swiper官网中文文档
安装:
npm i swiper@3.4.2 -S
在组件中引入插件:
import Swiper from ‘swiper’;
import ‘swiper/dist/css/swiper.min.css’;
在模板中:
mounted(){
var swiper = new Swiper(‘.swiper-container’, {
autoplay:5000,
loop: true,
});
}
详情配置 swiper 3官方
可放在swiper 轮播图容器中,进行数据循环显示。可用v-show控制数据的显示和隐藏
城市选择页面:
主要功能:城市地址搜索,右侧点字母相应地址数据滚动显示
搜索:
将所有字母中数组的数据循环取出,在对当前数据进行搜索提取(傻瓜写法)
对绑定文本框的变量进行watch监听,使用filter,includes进行模糊搜索,将结果单独存放在新数组中进行渲染。创建空盒子用于数据渲染位置,用定位放到相应位置,v-if控制搜索结果有无是否显示与隐藏
点击字母滚动显示相应地址数据:
使用Object.keys(提取数据)将数据中的字母提取出来,进行循环渲染。固定定位到页面左侧相应位置,点击字母获当前索引号。同时获取当前位置数据最外层盒子DOM元素通过【索引】获取当前点击字母对应数据盒子的DOM元素。再然后将其赋值给浏览器滚动距离