引言

经过一段时间的学习，开始动手做vue的第二个实战项目了，刚开始上大三还是菜鸡，目前只实现了一些页面方面的制作和逻辑，如有错误，欢迎大家指出。这是我项目的源代码地址：https://github.com/Angus2333/vue_dewu.git 欢迎感兴趣的同学一起讨论。

项目概述

前端技术栈

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结构的变化，会自动的自我刷新一次，通过自我刷新就能解决这个滚动宽度计算问题。

以上就是我遇到的一些小问题，刚开始大三确实菜，接下来好好沉淀，学无止境，冲冲冲。