utilização vue plug-ins fazer carrossel figura

Uso vue vue-impressionante-swiper produzido carrossel FIG.

1. Acesse github, pesquisa vue-awesome-swiper, uso de vista.

O primeiro pit: github não pode realmente acesso.

Solução: se referir a alguém  https://www.cnblogs.com/Owen-ET/p/10868620.html

Na verdade, não visitar visita não importa, de acordo com as seguintes etapas no-lo.

 

2. Instale vue-awesome-swiper especificado versão

O segundo pit: Você deve usar esta versão, a parte traseira ou então um monte de bug.

npm i [email protected] --save

 

3. Nos componentes New Swipe.vuer pasta de componentes, e em seguida, cole o código abaixo:

< Template > 
  < div > 
    < div class = "wrapper" > 
      < swiper ref = "mySwiper" : Opções = "swiperOptions" > 
        < swiper-slide v-for = "(item, i) em picList" : chave = "i " > < img : src =" item.src" > </ swiper-slide > 
        < div class = "swiper-pagination" ranhura = "paginação" > </ div > 
      </ Swiper > 
    </ div > 
  </div > 
</ Template > 
< script > 
Export padrão { 
  name: " Swiper " , // aqui Swiper não pode ser usado como um nome, ou erro 
  de dados () {
     return { 
      swiperOptions: { 
        a paginação: " .swiper-a paginação " , // FIG ponto de rotação 
        loop: a verdadeira , // ciclo 
      }, 
      picList: [ 
          {ID: 0 , o src: ' https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png' }, 
          {Id: 1 , src: ' https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg ' } 
      ] 
    }; 
  } 
}; 
</ Roteiro >

 

/ * Imagem% 100 * / 
.swiper Slide-IMG { 
    width : 100% ; 
}

 

 

componente pai introduziu Swipe.vue

O terceiro pit: este novo nome de Swiper.vue não pode ser chamado Swiper! ! ! ! ! Chamado de outra coisa, como, HomeSwiper

Caso contrário, ele irá relatar o seguinte erro:

 

 

4. Neste momento, a rotação já é possível deslizar o slide. Muito feliz ainda. Então você deslizar a deslizar, quando, na verdade, descobriu que há um aviso.

A quarta pit: slide para outro e encontrou o seguinte erro

 

 Solução: Adicione a seguinte em App.vue em grande estilo.

/ * Resolver carrossel corrediça FIG erro * / 
* { Touch-Acção : nenhum ;}

 

5. FIG aparecer no ponto de rotação, o padrão é azul para branco para olhar melhor.

O quinto pit: set direto para o branco não é aceitável. . .

solução:

<style lang = "css" escopo> 
 
.wrapper >>> .swiper-pagination-bala ativa { 
    background-color : ! #fff importante ; 
} 
</ Style>

efeito:

 

 

código completo:

Swiper.vue

< Template > 
  < div > 
    < div class = "wrapper" > 
      < swiper ref = "mySwiper" : Opções = "swiperOptions" > 
        < swiper-slide v-for = "(item, i) em picList" : chave = "i " > < img : src =" item.src" > </ swiper-slide > 
        < div class = "swiper-pagination" ranhura = "paginação" > </ div > 
      </ Swiper > 
    </ div > 
  </div > 
</ Template > 
< script > 
Export padrão { 
  name: " HomeSwiper " , // aqui não Swiper como nome, erro ou 
  de dados () {
     return { 
      swiperOptions: { 
        a paginação: " .swiper-a paginação " , // roda FIG multicast ponto 
        loop: a verdadeira , // ciclo 
      }, 
      picList: [ 
          {ID: 0 , o src: ' https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png' }, 
          {Id: 1 , src: ' https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg ' } 
      ] 
    }; 
  } 
}; 
</ Roteiro > 
< estilo lang = "css" escopo > 
 
.wrapper >>> .swiper-pagination-bala-ativa { 
    background-color : # fff ; 
} 
/ * 图片100% * / 
.swiper-corrediça img { 
    largura : 100% ; 
} 
</ Style >

App.vue

< Estilo > 
/ * resolver carrossel de slides FIG erro * / 
* { Touch-Ação : nenhum ; }  
</ style >