国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue組件開發(fā)練習--焦點圖切換

canopus4u / 2843人閱讀

摘要：今天，我就分享一個組件的練手項目焦點圖切換組件。這個項目是我用于組件練習的一個項目，當然了，代碼也會提交到，有空也會維護。父子組件傳參方式，我想大家知道。然后，根據，設置對應點的。

1.前言

vue用了有一段時間了，開發(fā)的后臺管理系統(tǒng)也趨于完善，現(xiàn)在時間比較算是有點空閑吧！這個空閑時間我在研究vue的另外的一些玩法，比如組件，插件等。今天，我就分享一個組件的練手項目--焦點圖切換組件。這個項目是我用于vue組件練習的一個項目，當然了，代碼也會提交到github（ec-slider），有空也會維護。我也想我開發(fā)的東西好用一點！現(xiàn)在，就是建議有需要的伙伴，可以來玩下這個項目，當練習的作用！另外，如果大家有什么建議，歡迎指點！

建議
 1.下面的步驟，最好在自己本地上跑起來，根據文章的步驟，逐步完成，如果只看代碼，很容易懵逼的。 
2.如果不清楚哪個代碼有什么作用，可能自己調試下，把代碼去掉后，看下有什么影響，就很容易想出代碼有什么作用了！
2.項目目錄

很普通，很好理解的一個目錄，但還是簡單的解釋一下吧

node_modules:文件依賴模塊（自動生成）
dist:打包文件產出目錄（自動生成）
src:開發(fā)文件目錄
src/components:組件文件目錄
.babelrc:babel編譯es6的配置文件
.gitnore:不提交到git的文件（目錄）的配置文件
fontSize:設置rem算法的文件（現(xiàn)在沒用到，忽略）
index.html：模板文件
index.js:入口文件
package.json:配置文件
README.md:說明文檔
webpack.config.babel.js:webpack配置文件

3.步驟詳解 3-1跑起來

這是項目的第一步（項目搭建這個，我不多說，之前的文章已經說了幾次了！），現(xiàn)在src/components/ec-slider.vue這里輸出一個‘守候’
1.首先，在src/components/ec-slider.vue里面輸出‘守候’，代碼如下

2.然后，在src/components/index.js里面設置注冊組件（要帶一個install方法），代碼如下

import SlideImg from "./ec-slider.vue"
const ecslide={
    install:function (Vue) {
        Vue.component("ec-slide",SlideImg)
    }
}
export default ecslide;

3.在入口文件，index.js里面引入并且使用組件

require("./index.html");
require("./src/sass/index.scss");
import Vue from "vue"
//引入并且使用組件
import ecslide from "./src/js/components/index";
Vue.use(ecslide);
let app6 = new Vue({
    el: "#app6",
    data: {

    },
    mounted(){
        
    }

});

4.在index.html（模板文件），輸出組件


    
    
        
        
        Title

5.命令行輸入$ npm run dev跑起來，結果完美！這幾步的原理貌似沒什么可多說的，都是固定式的步驟。

3-2開發(fā)準備

經過上一步之后，基礎就已經打好了，那么接下來就是一個開發(fā)的過程，大部分都是修改src/components/ec-slider.vue這個文件。
開發(fā)之前，大家不要急著寫代碼，先分析下當中的運行流程！
首先，一個焦點圖切換，需要什么參數(shù)？根據下面的一個淘寶栗子，我簡單分析下，就是下面這幾個！

list-圖片列表[{src:"url",href:"https://www.baidu.com"},{src:"url",href:"http://www.163.com"}]（src:圖片的src，href:跳轉連接，點擊圖片的時候）
autoplay-是否自動播放 布爾 （默認false）
type-輪播方式‘transparent’（透明度切換）， "slide"（滑動切換） （默認slide）
option-對應切換 （默認false，不顯示）
time-輪播間隔時間，毫秒 （默認4000）
sildetype-過渡效果 （默認"ease"慢速開始，然后變快，然后慢速結束的過渡效果,參考：transition-timing-function）
arrowurl-箭頭圖片鏈接
arrowsize-箭頭尺寸‘width,height’
direction-切換方向"left"（左右） "top"（上下） （默認：左右）

分析完了之后，就知道暫時需要這么多參數(shù)，那么接下來就是在ec-slider.vue里面，接收這些參數(shù)。父子組件傳參方式，我想大家知道--props。代碼如下

有地方接收參數(shù)，肯定要有地方傳參數(shù)，就是index.html模板文件里面?zhèn)?/p>
3-3樣式布局

既然知道了，會接收什么參數(shù)，那下面先把樣式布局，給弄好先，這個不多說，代碼如下！（有些解釋我也是直接打到代碼上）

運行結果，就是下面這樣

3-4執(zhí)行動畫

布局搞定了，下面就可以寫動畫，讓輪播動起來！這里也需要增加幾個變量，一個是nowIndex,記錄當前索引。一個是timer定時器！
首先，我用transform:translate3d()這個方式控制ul的滑動。

然后，根據nowIndex，設置對應點的class。

js代碼如下

到了這里，剩下的就只有點擊兩個箭頭，執(zhí)行相應動畫，這個就相對簡單，無非就是調用switchDo函數(shù)，唯一區(qū)別在于，點擊左邊的箭頭，是減少模式，右邊箭頭的增加模式。代碼如下，很好理解。

到了這里，對交互有強迫癥的開發(fā)者就受不了了，到了最后一張，再點擊右邊箭頭，就會出現(xiàn)下面的情況！

到了第一張，再點擊左邊箭頭也是類似的情況，這樣就很不好。理想情況是下面這樣

3-5細節(jié)優(yōu)化

要想做上面的效果，改的地方會比較多，先說下原理吧，到了最后一張，這個時候，再點擊右邊箭頭，像淘寶那樣，回到第一張。到了第一張，再點擊左邊箭頭類似效果回到最后一張。那么最后的布局是這樣

這樣布局能實現(xiàn)效果，到了最后一張，這個時候，再點擊右邊箭頭，像淘寶那樣，回到第一張。就像下面

這個時候，就需要多做一步，滾動到這里的時候，瞬間拉回去。而且這個拉回去，要把ul的過渡效果transition去掉，不然就會看到拉回去的過渡效果！同時要改變nowIndex。

1.首先，ul布局方面

2.然后，對應的點修改

這個可能會有點繞，我解釋下，比如滾動最后一張了，再點擊右邊箭頭，向右滑動到第一張的時候，如下圖

這個時候又要把第一個點變成藍色，但是對應點的索引和nowIndex對不上，這個時候用一個技巧。把第一個（.span1）點顯示出來，然后把最后一個點隱藏。這樣還是用戶看到還是看到4個點在屏幕！等動畫執(zhí)行完了，拉回去第一張的時候。把.span1隱藏，正常顯示對應的點！這個大家細想一下就知道了。到了第一張，再點擊左邊箭頭類似效果回到最后一張也是相同的處理方式！

到這里，功能就基本完成了，下面給出這部分代碼！
3-6其它切換方式

碼農怎么會滿足于現(xiàn)狀，只有一種切換方式，怎么行，所以我又完善了些，1.一個透明度的切換方式。2.當傳進的list長度為1的時候只顯示圖片，不進行任何動畫。3.左右滑動事件的處理（不規(guī)范處理）！雖然也是很少功能，但是我在日常開發(fā)可以滿足！
完整代碼如下，大家也可以去github上面看代碼ec-slider

index.html




    
    
    Title
4.小結

好了，今天的開發(fā)就到此為止了。起初這個項目我是打算當練手用的，但是后來在項目上使用了，雖然這個寫得比較簡單，但是效果還不錯。現(xiàn)在情況還不是很好，以后有需要也會維護。目前來說，也是建議大家可以玩下這個項目，雖然文章有點長，但是直接看下，邊動手寫代碼，邊看文章，會發(fā)現(xiàn)。一下子就看完了！這個應該是不錯的練手項目，可以熟悉使用vue開發(fā)組件！最后，如果大家覺得有哪里寫錯了，寫得不好，歡迎指點！

-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91755.html

相關文章

  • vue插件開發(fā)練習--實用彈窗

    摘要：前言上回說了組件組件開發(fā)練習焦點圖切換的一個練習項目，這次換下口味，說下的插件練手的項目。和組件開發(fā)的目錄相比，區(qū)別就在于這個文件夾上。開發(fā)過程把項目跑起來首先，先弄這個組件。最后還需要一個變量，控制彈窗是否顯示。 1.前言 上回說了組件（vue組件開發(fā)練習--焦點圖切換）的一個練習項目，這次換下口味，說下vue的插件練手的項目。相對于現(xiàn)在之前的焦點圖切換的組件，這個可能就更簡單了，基...

    muzhuyu 評論0 收藏0

  • 2017-09-13 前端日報

    摘要：前端日報精選中的垃圾收集，圖文指南十個免費的前端開發(fā)工具專題之遞歸如何在鏈中共享變量基于的爬蟲框架中文譯十六進制顏色揭秘掘金掘金小書基本環(huán)境安裝小書教程中間件對閉包的一個巧妙使用簡書源碼分析掘金組件開發(fā)練習焦點圖切換前端學 2017-09-13 前端日報 精選 V8 中的垃圾收集（GC），圖文指南十個免費的web前端開發(fā)工具JavaScript專題之遞歸 · Issue #49 · m...

    BWrong 評論0 收藏0

  • 2018年8月所遇知識點整理

    摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，頁面的錨鏈接定義錨點錨點鏈接。類似于我們閱讀書籍時的目錄頁碼或章回提示。 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導 一， 頁面的錨鏈接 1,定義：錨點,錨點鏈接。常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還...

    silenceboy 評論0 收藏0

  • 2018年8月所遇知識點整理

    摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，頁面的錨鏈接定義錨點錨點鏈接。類似于我們閱讀書籍時的目錄頁碼或章回提示。 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導 一， 頁面的錨鏈接 1,定義：錨點,錨點鏈接。常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還...

    guqiu 評論0 收藏0

  • Vue一個案例引發(fā)的動態(tài)組件與全局事件綁定總結

    摘要：我們需要的最好效果肯定是當前的全局事件就在當前的組件下產生作用，當我們切換到其他組件時，事件自動刪除，于是我可能想到的就是利用鉤子函數(shù)去刪除這個全局事件。 最近在自學 Vue 也了解了一些基本用法，也記錄了一些筆記有興趣的朋友可以去查看我的其他文章，技術這東西真的不能光靠看，看是沒有的，你必須要動手實踐，只有在實戰(zhàn)項目中才能發(fā)現(xiàn)問題，才能發(fā)現(xiàn)我們沒有掌握的知識點，然后發(fā)現(xiàn)問題解決問題，...

    MycLambert 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<