• 0

  • 496

vue实战项目之购物app问题记录

智能的司机

我是老司机

1星期前

引言

经过一段时间的学习,开始动手做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结构的变化,会自动的自我刷新一次,通过自我刷新就能解决这个滚动宽度计算问题。

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

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

496

相关文章推荐

未登录头像

暂无评论