成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

構(gòu)建Vue.js組件:slider

zxhaaa / 3361人閱讀

摘要：組件的使用場(chǎng)景很多，主要為圖片的展示。一個(gè)主要由頂層容器和每一幀的組成。更多關(guān)于由于支持多個(gè)可用戶自定義的，所以需要在中聲明這些支持的自定義屬性，以便在組件聲明時(shí)使用上一幀下一幀導(dǎo)航自動(dòng)播放播放效果導(dǎo)航位置滑動(dòng)特效組件支持兩種特效和。

Slider組件的使用場(chǎng)景很多，主要為圖片的展示。一個(gè)slider主要由頂層容器和每一"幀"的slide組成。下面通過(guò)一個(gè)例子嘗試基于Vue.js去構(gòu)建一個(gè)Slider組件，支持以下功能：

上一幀／下一幀 導(dǎo)航

自動(dòng)播放

播放效果(slide/fade)

無(wú)限循環(huán)

Dot

Dot hover 導(dǎo)航

Slider 頂層容器

標(biāo)簽處便是每一幀的slide，可在子組件中使用v-for結(jié)合一個(gè)儲(chǔ)存圖片地址的數(shù)組遍歷輸出。更多關(guān)于slot

api

由于slider 支持多個(gè)可用戶自定義的api，所以需要在props中聲明這些支持的自定義屬性，以便在組件聲明時(shí)使用：

// ...
props: {
  // 上一幀／下一幀 導(dǎo)航
  control: {
    type: Boolean,
    default: true
  },
  // 自動(dòng)播放
  auto: {
    type: Boolean,
    default: false
  },
  // 播放效果(slide/fade)
  effect: {
    type: String,
    default: "fade"
  },
  // dot
  dot: {
    type: Boolean,
    default: true
  },
  // Dot hover 導(dǎo)航
  dotHover: {
    type: Boolean,
    default: true
  },
  // Dot 位置(left | center | right)
  dotFloat: {
    type: String,
    default: "center"
  }
},
// ...
滑動(dòng)特效

slider 組件支持兩種特效：slide和fade。

slide特效的每一次滑動(dòng)都改變slider的right值，結(jié)合CSS3的transition來(lái)實(shí)現(xiàn)滑動(dòng)。

fade特效為改變當(dāng)前幀的opacity趨向0，目標(biāo)幀的opacity趨向1，通過(guò)一個(gè)定時(shí)器setTimeout控制，從而實(shí)現(xiàn)漸隱漸現(xiàn)的效果。這時(shí)需考慮自動(dòng)播放為true時(shí)手動(dòng)去點(diǎn)擊上一幀／下一幀時(shí)需先清除這個(gè)定時(shí)器。

如何使用 
import slider from "slider"
import slide from "slide"

然后...


  
     
  • 
       
    {{$index}}
    
     
    •

    當(dāng)當(dāng)當(dāng) 好了.

    說(shuō)了那么多(￣ー￣)，源碼－> Link

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107013.html

    相關(guān)文章

    • 推薦給新手的35個(gè)好用的Vue開(kāi)源庫(kù)

      摘要：無(wú)論是開(kāi)發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開(kāi)源軟件包。所幸的是，隨著社區(qū)的不斷壯大，每天都會(huì)出現(xiàn)一些很好的軟件包。在下文中，我們將推薦一些非常好用的開(kāi)源庫(kù)是一個(gè)非常易用的漸進(jìn)式框架，用于構(gòu)建用戶界面。的一個(gè)極簡(jiǎn)主義的深色設(shè)計(jì)系統(tǒng)。 無(wú)論是開(kāi)發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開(kāi)源軟件包。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，如果沒(méi)有這些開(kāi)源軟件包，很難想象我們的生活會(huì)變得多么疲憊不堪，而且靠咖啡度日也會(huì)成...

      oliverhuang 評(píng)論0 收藏0

    • vue-music（1）音樂(lè)播發(fā)器 項(xiàng)目開(kāi)發(fā)記錄

      摘要：在中新建組件許文瑞正在吃屎。。。。在中添加如下代碼三歌手組件開(kāi)發(fā)歌手首頁(yè)開(kāi)發(fā)數(shù)據(jù)獲取數(shù)據(jù)獲取依舊從音樂(lè)官網(wǎng)獲取歌手接口創(chuàng)建我們和以前一樣，利用我們封裝的等發(fā)放，來(lái)請(qǐng)求我們的接口，返回給。 Vue-Music 跟學(xué)一個(gè)網(wǎng)課老師做的仿原生音樂(lè)APP跟學(xué)的筆記，記錄點(diǎn)滴，也希望對(duì)學(xué)習(xí)vue初學(xué)小伙伴有點(diǎn)幫助 showImg(https://segmentfault.com/img/remot...

      happen 評(píng)論0 收藏0

    • vue.js 移動(dòng)端音樂(lè)app（一） 基礎(chǔ)組件 scroll

      一、 基礎(chǔ)實(shí)現(xiàn) （1）功能 對(duì) better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一 （1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

      wqj97 評(píng)論0 收藏0

    • vue.js 移動(dòng)端音樂(lè)app（一） 基礎(chǔ)組件 scroll

      一、 基礎(chǔ)實(shí)現(xiàn) （1）功能 對(duì) better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一 （1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

      FingerLiu 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <