亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

swiper的使用

MyFaith / 2945人閱讀

摘要:是一款輪播圖插件,我是用在里面,方便省事兒。官網(wǎng)地址地址安裝安裝完成之后,我沒有在中注冊(cè)它,而是在使用頁面注冊(cè)的。因?yàn)橥ǔ碚f輪播圖只會(huì)在一個(gè)應(yīng)用的首頁展示,所以就沒必要在全局注冊(cè)它,只用在頁面注冊(cè)使用一下就可以了。

swipe是一款輪播圖插件,我是用在vue里面,方便省事兒。
swipe里面有很多關(guān)于滑動(dòng)的組建,我只用過輪播圖,如果以后有時(shí)間,可以再看看官網(wǎng)上別的組件介紹。
官網(wǎng)地址

github地址

安裝:

npm install vue-swipe

安裝完成之后,我沒有在main.js中注冊(cè)它,而是在使用頁面注冊(cè)的。因?yàn)橥ǔ碚f輪播圖只會(huì)在一個(gè)應(yīng)用的首頁展示,所以就沒必要在全局注冊(cè)它,只用在index.vue頁面注冊(cè)使用一下就可以了。

如何使用:

//html


    1
    2
    3
//js

//頂部引用
import { Swipe, SwipeItem } from "vue-swipe"
import "vue-swipe/dist/vue-swipe.css";

//注冊(cè)局部組建
components: {
    Swipe,SwipeItem
}
//css

.carousel-figure {
    height: 150px;   //必須得給個(gè)高度,不然高度是0,啥都不顯示
    .slide1 {
        background-color: blue;    
    }
    .slide2 {
        background-color: gold;
    }
    .slide3 {
        background-color: green;
    }
}

注意:其實(shí)首頁輪播圖我更經(jīng)常用循環(huán)的方式寫出來,這是項(xiàng)目中的代碼:

//循環(huán)的時(shí)候必須綁定key,否則會(huì)出錯(cuò)

    
        
    

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

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

相關(guān)文章

  • 解決使用 swiper 常見問題

    摘要:圖片延遲加載需要將圖片標(biāo)簽的改寫成,并且增加類名。取消拖動(dòng)最后一頁或者第一頁時(shí)的留白狀態(tài)抵抗率。邊緣抵抗力的大小比例。可應(yīng)用于分頁器,按鈕和滾動(dòng)條。點(diǎn)擊查看的文檔 使用 swiper 的過程中個(gè)人總結(jié) 1. swiper插件使用方法, 直接查看文檔 swiper基礎(chǔ)演示 swiper API文檔 2.swiper近視初始化時(shí), 其父級(jí)元素處于隱藏狀態(tài)(display:none),會(huì)...

    王偉廷 評(píng)論0 收藏0
  • 移動(dòng)端 - 局部滾動(dòng)

    摘要:對(duì)話內(nèi)容超過一屏,使對(duì)話內(nèi)容上移,當(dāng)然是改變父元素的值啦用戶可以上下滑動(dòng)對(duì)話框,就類似于滾動(dòng)條效果,設(shè)置父元素高度并且,子元素高度即可。遇到問題局部滾動(dòng)效果,以上想法設(shè)置父元素高度并且在端可以正?;瑒?dòng),但在移動(dòng)端失效。 起因 我司最近在做一個(gè)H5,有一個(gè)模擬微信對(duì)話框的需求,具體需求如下。 對(duì)話內(nèi)容固定,但需要一句一句顯示 對(duì)話內(nèi)容超過一屏后,需要使對(duì)話內(nèi)容上移 對(duì)話內(nèi)容結(jié)束后,用戶...

    xiongzenghui 評(píng)論0 收藏0
  • Swiper插件讀后感

    摘要:今天,我無意中看到這樣一個(gè)東西,它叫做,這是一個(gè)開源免費(fèi)的適用于各種移動(dòng)端的觸摸滑動(dòng)插件。同時(shí)導(dǎo)航欄也是可以手動(dòng)滑動(dòng)的,當(dāng)用戶手動(dòng)滑動(dòng)導(dǎo)航欄,點(diǎn)擊某一個(gè)板塊時(shí),下面的內(nèi)容部分會(huì)隨即滑到相應(yīng)的內(nèi)容塊。 今天,我無意中看到這樣一個(gè)東西,它叫做Swiper,這是一個(gè)開源免費(fèi)的適用于各種移動(dòng)端的觸摸滑動(dòng)插件??戳艘槐槲臋n,發(fā)現(xiàn)并不是很難,于是打算動(dòng)手自己寫一個(gè)Swiper官網(wǎng)上的稍復(fù)雜點(diǎn)的小d...

    CODING 評(píng)論0 收藏0
  • vue-awesome-swiper滑塊插件使用基礎(chǔ)

    摘要:前言目前在使用建立的版項(xiàng)目中,直接引入官方的文件會(huì)導(dǎo)致報(bào)錯(cuò),所以需要用到版本的。安裝版配置使用可參考插入滑塊組件與官方相同,額外的控制器依然可以放到整個(gè)滑塊之外。 前言 目前(2017-07-11)在使用vue-cli建立的webpack版項(xiàng)目中,直接引入官方的swiper文件會(huì)導(dǎo)致報(bào)錯(cuò),所以需要用到vue版本的swiper。 webpack-simple版可直接引入官方swiper文...

    microelec 評(píng)論0 收藏0
  • swiper 劃不動(dòng)問題

    摘要:是目前較為流行的移動(dòng)端觸摸滑動(dòng)插件,因?yàn)槠浜唵魏糜靡咨鲜郑艿胶芏嗲岸碎_發(fā)者的歡迎。而數(shù)據(jù)在初始化之后才異步請(qǐng)求到,則無法正確有多少個(gè)實(shí)際上找到一個(gè)待循環(huán)模板,所以劃不動(dòng)。找到原因后,只須對(duì)癥下藥。兩者默認(rèn)值都為。 Swiper是目前較為流行的移動(dòng)端觸摸滑動(dòng)插件,因?yàn)槠浜唵魏糜靡咨鲜?,受到很多前端開發(fā)者的歡迎。今天在使用Swiper的時(shí)候遇到這個(gè)問題: 使用模板引擎動(dòng)態(tài)生成swiper...

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

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

0條評(píng)論

MyFaith

|高級(jí)講師

TA的文章

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