The introduction

After a period of study, I began to do the second actual combat project of VUE. At the beginning of my junior year, I was still a vegetable chicken. So far, I have only realized the production and logic of some pages. This is the source code address of my project: github.com/Angus2333/v… Those who are interested are welcome to discuss together.

Description of project

Front-end technology stack

  • Vue: A front-end framework for building interfaces
  • Axios: Implementing data interface requests (using native JSON data emulation)
  • Vue-swiper: home page rotation map production and implementation of sliding paging effect
  • Vue-better-scroll: indicates the scroll operation of a category page
  • vue-router
  • stylus

First, page initialization

I used Swiper3 for the rotation chart of the home page. I will not repeat the introduction here, but there are still some changes in Swiper3 and Swiper4 in SwiperOption. I just didn’t care which version I used at that time. Later, IT was found that SwiperOption had a problem. There was a pit in it. See the difference below:

Scrollable paging part of a multicast graph

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 } }Copy the code

When there are more than eight images on the page, let the page scroll, and the ninth image and subsequent images appear on the second page.

Second, classification page

Previously in the nuggets always listen to the big man said that the better scroll is the best use of mobile end rolling plug-in, can make rolling more smooth ah, inertia rolling, elastic rolling ah what, after using really feel sweet, but there are pits…. B: Maybe I’m just too lazy

I found the following four points to pay attention to when using it:

1. Hierarchy

It would be an error to write that there cannot be more than one sibling div inside the Wrapper

<div class="wrapper"> <div class="content1">content... </div> <div class="content1">content... </div> </div>Copy the code

2. Whether to add style style to content

<div class="classifyTitle" ref="wrapper"> <ul> <li v-for="(item,index) in classifyData.products"> <router-link Details: the to = "{name: ' '}" > {{item. The title}} < / router - the link > < / li > < / ul > < / div >Copy the code

The review element can be seen:

3. The height of wrapper and content

You can scroll only if the content height is greater than the Wrapper height. How to see?

this.$nextTick(() => { if (! this.scroll) { this.scroll = new BScroll(this.$refs.wrapper, {}) console.log(this.scroll) } })Copy the code

4. Wrapper style issues

The.Wrapper element should be positioned.

In addition, the search function is implemented in the classification page, and the data is simulated with local JSON data.

HTML part:

<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>Copy the code

Js:

watch: { keyword() { if (this.master) { clearTimeout(this.timer); } if(! This.keyword){this.list=[] return} // throttle 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); }},Copy the code

Details page

What is realized here is the function of a gallery. It uses two rotation charts. When clicking the first rotation chart, a gallery will pop up, and when clicking the gallery picture, the gallery will disappear.

The HTML portion of the banner:

<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>
Copy the code

Js:

methods: { handleBannerClick() { this.showGallary = true; }, handleGallaryClose() { this.showGallary = false; }},Copy the code

data() { return { swiperOptions: { pagination:'.swiper-pagination', loop: ObserveParents :true, observer:true},}; observeParents:true, observer:true}; }, methods:{ handleGallaryClick(){ this.$emit('close') } }Copy the code

I ran into a problem while doing this, the gallery section didn’t roll properly.

SwiperOption has two configuration items: observeParents:true, Observer :true,

This is to solve the rotation problem in the gallery section. The commonly-Gallary component is hidden at first. When it is displayed again, swiper has some problems calculating the width, causing the rotation image to not scroll properly. Swiper is a plugin that automatically refreshes itself when the element or its parent element changes its Dom structure. Swiper is a plugin that automatically refreshes itself when the element or parent element changes its Dom structure.

The above is some small problems I encountered, just started the big three dishes, then good precipitation, endless learning, flush.