引言
经过一段时间的学习，开始动手做vue的第二个实战项目了，刚开始上大三还是菜鸡，目前只实现了一些页面方面的制作和逻辑，如有错误，欢迎大家指出。 这是我项目的源代码地址：github.com/Angus2333/v… 欢迎感兴趣的同学一起讨论。
项目概述
前端技术栈
- Vue：用于构建界面的前端框架
- axios：实现数据接口请求（用本地的json数据模拟）
- vue-swiper：首页轮播图的制作以及实现可滑动分页效果
- vue-better-scroll：分类页面的滚动操作
- vue-router
- stylus
一、页面初始化
首页的制作中，轮播图部分我用的是Swiper3，引入部分在此不再赘述，但是Swiper3和Swiper4在SwiperOption里面还是有一些变化，我当时就是没有在意自己下的是哪个版本，调试了很久没有出效果，后面才发现是SwiperOption的问题，这里是有坑的。区别见下图：
轮播图可滚动的分页部分Js代码：
computed: {
pages () {
const pages = []
this.list.forEach((item, index) => {
const page = Math.floor(index / 8)
if (!pages[page]) {
pages[page] = []
}
pages[page].push(item)
})
return pages
}
}
当页面图片大于八张时，让页面可以滚动，第九张图片及以后图片出现在第二页。
二、分类页面
之前在掘金上总听大佬说better-scroll是最好用的移动端滚动插件，可以让滚动更流畅啊，惯性滚动、弹性滚动啊啥的，用了以后确实觉得香，但是里面也有坑....可能是我太菜了
我在用的时候发现有以下四点需要注意：
1.层级关系
wrapper里面不能存在多个同级div，下面这样写就是错误的
<div class="wrapper">
<div class="content1">content...</div>
<div class="content1">content...</div>
</div>
2.content是否被添加style样式
<div class="classifyTitle" ref="wrapper">
<ul>
<li v-for="(item,index) in classifyData.products">
<router-link :to="{name:'详情'}">{{item.title}}</router-link><
/li>
</ul>
</div>
审查元素可以看到：
3.wrapper与content高度问题
只有content的高度大于wrapper高度时候，才可以滚动。如何看？
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {})
console.log(this.scroll)
}
})
4.wrapper样式问题
.wrapper元素上要给定位。
在此之外在分类页面实现了搜索功能，数据是用本地的json数据模拟的。
html部分：
<div class="search-content" ref="search" v-show="keyword">
<ul>
<li v-for="item of list" :key="item.id" class="search-item border-bottom">
{{ item.name }}
</li>
<li class="search-item border-bottom " v-show="hasData">
没找到匹配数据
</li>
</ul>
</div>
js部分：
watch: {
keyword() {
if (this.master) {
clearTimeout(this.timer);
}
if(!this.keyword){
this.list=[]
return
}
//节流
this.timer = setTimeout(() => {
const result = [];
for (let i in this.Brands) {
this.Brands[i].forEach((value) => {
if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
result.push(value);
}
});
}
this.list = result;
}, 100);
},
},
三、详情页
这里实现的是一个画廊的功能，用了两个轮播图，当点击第一个轮播图时，就会弹出一个画廊，当点击画廊图片时，画廊又会消失。
banner的html部分：
<div class="swiper" @click="handleBannerClick">
<swiper :options="swiperOptions" v-if="showSwiper">
<swiper-slide v-for="item in list" :key="item.id">
<img :src="item.imgUrl" class="banner-img" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<common-gallary :list="list" v-show="showGallary" @close="handleGallaryClose" >
</common-gallary>
js部分：
methods: {
handleBannerClick() {
this.showGallary = true;
},
handleGallaryClose() {
this.showGallary = false;
},
},
data() {
return {
swiperOptions: {
pagination:'.swiper-pagination',
loop: true,
//监听该元素或者父级元素发生变化时，自动刷新
observeParents:true,
observer:true
},
};
},
methods:{
handleGallaryClick(){
this.$emit('close')
}
}
在做的过程中我遇到了一个问题，画廊部分不能正常滚动。
后来我发现，其中swiperOption有两个配置项 ：observeParents:true, observer:true ，
这是为了解决画廊部分的轮播问题，一开始让common-gallary这个组件隐藏，当他再次显示出来的时候，swiper计算宽度会有一些问题，导致轮播图无法正常滚动，这时候swiperOption中的这两个参数就可以解决这个问题。这里的意思是，swiper这个插件可以监听到当我这个元素或者父级元素发生Dom结构的变化，会自动的自我刷新一次，通过自我刷新就能解决这个滚动宽度计算问题。
以上就是我遇到的一些小问题，刚开始大三确实菜，接下来好好沉淀，学无止境，冲冲冲。
