天給大家分享一個(gè)功能超贊的Vue區(qū)間滑塊組件VueSliderComponent。
vue-slider 一款強(qiáng)大到令人窒息的滑塊選擇器組件。順滑般拖到效果,擁有多種主題樣式(默認(rèn)|antd|material),可以支持SSR、Typescript及更多滑塊。
安裝
$ npm i vue-slider-component -S
插件使用
<template>
<div>
<vue-slider
v-model="value"
:adsorb="true"
:drag-on-click="true"
:interval="10"
>
</vue-slider>
</div>
</template>
<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'
export default {
components: {
VueSlider
},
data () {
return {
value: [0, 5000]
}
}
}
</script>
提供各種豐富示例及API文檔
附上演示示例及倉(cāng)庫(kù)鏈接
# 文檔/演示地址
https://nightcatsama.github.io/vue-slider-component/
# github地址
https://github.com/NightCatSama/vue-slider-component
好了,就介紹到這里。如果小伙伴們有其他Vue區(qū)塊選擇器,歡迎留言一起交流討論。
所接觸到的Slider滑塊應(yīng)用的場(chǎng)景,主要有圖片的放大縮小,調(diào)節(jié)聲音的大小。不知道小伙伴們的應(yīng)用場(chǎng)景都有哪些呢?歡迎在文章下方留言討論哈。
準(zhǔn)備工作:
{ path: '/slider', name: 'slider', component: ()=> import('./views/Slider.vue') }
<a href="javascript:void(0)" @click="$router.push('/slider')"> <van-col span="6" class="marb20"> <van-icon name="gift" /> <div>Slider 滑塊</div> </van-col> </a>
至今為止呢,我們的首頁(yè)顯示的樣式子是這樣滴?不知道不覺(jué)間我們已經(jīng)學(xué)完了25個(gè)組件了!哇噢,為自己歡呼一下吧!如果想看更多的內(nèi)容,歡迎關(guān)注我,每天都有更新哈。
代碼演示Slider滑塊:
基礎(chǔ)方法:
<van-slider v-model="value" @change="onChange" /> data() { return { value: 30, } }, methods: { onChange(value) { console.log(value) }, }
van-slider的值與數(shù)據(jù)結(jié)構(gòu)里的value進(jìn)行雙向數(shù)據(jù)綁定。惟一一個(gè)事件就是change事件,當(dāng)我們?cè)诨瑒?dòng)滑塊的時(shí)候,就會(huì)觸發(fā)change事件,當(dāng)然change事件里會(huì)有個(gè)value值,這個(gè)value值即為當(dāng)前的進(jìn)度。在開(kāi)發(fā)過(guò)程不中,我們可以將這個(gè)值得出來(lái)后,利用ajax請(qǐng)求,將這個(gè)值傳給后端讓他們做處理。
指定選擇范圍:
van-slider的取值范圍是0-100 。有時(shí)候我們的需求呢取值范圍并不是從0到100,而是從中間一個(gè)位置到指定一個(gè)位置結(jié)束,這時(shí)候怎么辦?只需要設(shè)置一下其max和min值就可以,如下:
<van-slider v-model="value" :min="50" :max="80" @change="onChange" />
這兩張圖分別顯示了可滑動(dòng)的范圍,從初始位置到終點(diǎn)位置。
指定步長(zhǎng)及自定義滑塊的高度:
通常根據(jù)項(xiàng)目的需要,會(huì)設(shè)定不一樣的步長(zhǎng)值以及不一樣的高度,可以這樣定義一下:
<van-slider v-model="value" :step="20" bar-height="6px" @change="onChange" />
:step: 這樣每次滑動(dòng)只能滑動(dòng)20
bar-height: 設(shè)置滑塊的高度。這里是以px為計(jì)量單位的。
這個(gè)組件的應(yīng)用就是這么簡(jiǎn)單。組件雖然簡(jiǎn)單,最重要的還是在項(xiàng)目中如何去應(yīng)用它,當(dāng)我們遇到類似的應(yīng)用時(shí),我們應(yīng)該即時(shí)想起這個(gè)組件,以及是否是這個(gè)組件的變形。
好啦,我們又學(xué)會(huì)一個(gè)組件了!鼓掌吧!我們的開(kāi)發(fā)效率又提高了一點(diǎn)點(diǎn)呢。每天積累一點(diǎn)點(diǎn),一年后會(huì)發(fā)現(xiàn)收獲滿滿。期待聽(tīng)到大家的成果噢!
今天就到這里啦。休息休息一會(huì)兒吧?明天繼續(xù)加油噢!加油
網(wǎng)頁(yè)設(shè)計(jì)中,內(nèi)容滑塊(Content Slider)是一個(gè)非常有用的工具,它可以突出顯示圖像、傳遞信息、用動(dòng)畫元素吸引用戶。在網(wǎng)頁(yè)主頁(yè)上,內(nèi)容滑塊可以在有限的空間內(nèi)傳遞大量信息。
下文是用于顯示圖像、視頻或HTML內(nèi)容的滑塊工具清單。有一些標(biāo)準(zhǔn)的內(nèi)容滑塊工具可以自定義主題、動(dòng)畫和樣式元素,還有一些可選的滑塊工具能夠以有趣的方式顯示圖像。所有這些內(nèi)容滑塊都是免費(fèi)的,但也有一些提供升級(jí)的付費(fèi)版本。
1、Zoom Slider(縮放滑塊)
Zoom Slider是具有縮放功能的簡(jiǎn)單內(nèi)容滑塊。每張幻燈片都有一個(gè)預(yù)定義的縮放區(qū)域,用于計(jì)算全屏幕填充的適當(dāng)縮放值。單擊縮放圖標(biāo)后,縮放區(qū)域和頁(yè)面將被縮放,從而產(chǎn)生查看者正在接近該項(xiàng)目的錯(cuò)覺(jué)。
2、Elastic Content Slider(彈性內(nèi)容滑塊)
Elastic Content Slider是一個(gè)簡(jiǎn)單且響應(yīng)迅速的jQuery內(nèi)容滑塊。它有一個(gè)用于內(nèi)容的滑塊區(qū)域,底部有一個(gè)類似于標(biāo)簽的導(dǎo)航。每個(gè)列表項(xiàng)都是一張幻燈片,在導(dǎo)航中具有相應(yīng)的鏈接元素。
3、Turntable
Turntable是一個(gè)響應(yīng)式的jQuery滑塊,當(dāng)你的鼠標(biāo)或手指滑過(guò)時(shí)它可以在一系列圖像中旋轉(zhuǎn),類似于用JavaScript制作的數(shù)字翻頁(yè)本。你所需要的只是一組圖像和jQuery。
4、Nivo Slider
Nivo Slider是一個(gè)受歡迎的內(nèi)容滑塊,有超過(guò)120萬(wàn)個(gè)網(wǎng)站使用。它具有獨(dú)立的jQuery版本和WordPress插件。Nivo Slider提供了一系列現(xiàn)成的主題和圖像過(guò)渡效果。你可以自定義要在單個(gè)幻燈片上展示的內(nèi)容。
5、FlexSlider
FlexSlider是WooCommerce的響應(yīng)式j(luò)Query滑塊工具包。支持所有主流瀏覽器,它提供水平和垂直幻燈片、淡入淡出動(dòng)畫、自定義導(dǎo)航選項(xiàng)、支持觸摸滑塊。
6、Glide
Glide是JavaScript ES6滑塊。它輕量、靈活、快速且可滑動(dòng)。插入模塊時(shí)可以獲取附加功能。
7、bxSlider
bxSlider是一個(gè)響應(yīng)式j(luò)Query內(nèi)容滑塊。它具有水平、垂直、淡入淡出模式以及許多配置選項(xiàng)。幻燈片可以包含圖像、視頻或HTML內(nèi)容。
8、Owl Carousel
Owl Carousel是支持觸摸的jQuery插件,它可以為移動(dòng)瀏覽創(chuàng)建響應(yīng)式的輪播滑塊。具有60多種自定義選項(xiàng),各種用戶都適用。Owl Carousel支持模塊化插件結(jié)構(gòu),可刪除不必要的插件或創(chuàng)建新的插件。
9、ajSlider
ajSlider是一個(gè)幻燈片jQuery插件,適合作為網(wǎng)頁(yè)或圖庫(kù)的主橫幅。根據(jù)你的需要設(shè)置滑塊的高度和寬度,讓它根據(jù)圖像自動(dòng)計(jì)算尺寸。另外,你還可啟用或禁用自動(dòng)幻燈片放映操作。
10、jcSlider
jcSlider是一個(gè)響應(yīng)式滑塊jQuery插件,帶有CSS動(dòng)畫(而不是jQuery),可以最大限度地提高性能。它反應(yīng)靈敏,具有60多種效果。
11、Unslider
Unslider是一個(gè)輕量級(jí)、響應(yīng)迅速的jQuery滑塊。可以根據(jù)需要更改、添加和刪除每個(gè)幻燈片中的CSS。Unslider是輕量級(jí)的滑塊,但它提供了一系列的選項(xiàng),如動(dòng)畫速度和延遲。
12.Tiny Circleslider
Tiny Circleslider是一種輕便的圓形輪播滑塊。它為開(kāi)發(fā)人員提供了標(biāo)準(zhǔn)輪播的獨(dú)特替代方案。可以將間隔設(shè)置為自動(dòng)滑塊。
13、Smart Slider
Smart Slider是WordPress和Joomla的免費(fèi)插件。創(chuàng)建精美的滑塊和內(nèi)容時(shí)無(wú)需任何代碼,你可從空白滑塊開(kāi)始,或者從各種模板中選擇。使用圖層可增強(qiáng)滑塊。
通過(guò)選擇標(biāo)題、文本、圖像、按鈕或視頻并應(yīng)用自定義選項(xiàng),可以進(jìn)行編輯。只需單擊幾下,即可添加YouTube和Vimeo視頻為圖層。
14、RoyalSlider
RoyalSlider是圖片庫(kù)和內(nèi)容滑塊插件,具有jQuery和WordPress版本。每個(gè)滑塊模板都具有響應(yīng)性和觸摸友好性。它提供了50多個(gè)可定制選項(xiàng)、4個(gè)皮膚、9個(gè)模板、視頻支持等等。RoyalSlider經(jīng)常被應(yīng)用在流行的品牌和組織網(wǎng)站上,如Diesel、Peugeot、Audi、Twitch、Ralph Lauren和NYC.gov。
15.Jssor
Jssor是具有200多種幻燈片效果的觸摸滑塊式圖像輪播。Jssor Slider響應(yīng)迅速并針對(duì)移動(dòng)瀏覽器進(jìn)行了優(yōu)化。它提供jQuery和無(wú)jQuery版本,并具有幻燈片和字幕幻燈片動(dòng)畫。另外,它還有一個(gè)收費(fèi)版本,每年15美元。
16、Master Slider
Master Slider是WordPress的免費(fèi)插件,響應(yīng)式圖像和視頻滑塊。它支持觸摸導(dǎo)航,帶有8個(gè)入門模板、6個(gè)交互轉(zhuǎn)換、定時(shí)器和用戶界面控件、循環(huán)和線性滑塊等等。
(編譯/雨果網(wǎng) 呂曉琳)
【特別聲明】未經(jīng)許可同意,任何個(gè)人或組織不得復(fù)制、轉(zhuǎn)載、或以其他方式使用本網(wǎng)站內(nèi)容。轉(zhuǎn)載請(qǐng)聯(lián)系:editor@cifnews.com
上雨果網(wǎng)搜索“跨境資料庫(kù)”,領(lǐng)取歐美/東南亞各國(guó)市場(chǎng)商機(jī)、各大平臺(tái)熱銷品報(bào)告、跨境電商營(yíng)銷白皮書!
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。