整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          超酷 Vue 滑塊選擇器組件Vue-Slider

          超酷 Vue 滑塊選擇器組件Vue-Slider

          天給大家分享一個(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)備工作:

          1. 創(chuàng)建一個(gè)頁(yè)面: Slider.vue
          2. 在router.js里配置 Slider頁(yè)面的路由
          {
           path: '/slider',
           name: 'slider',
           component: ()=> import('./views/Slider.vue')
           }
          
          1. 在index.vue里添加一項(xiàng)
          <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)銷白皮書!


          主站蜘蛛池模板: 亚洲毛片αv无线播放一区| 国产福利电影一区二区三区久久老子无码午夜伦不 | 国内自拍视频一区二区三区| 日本一区二区三区在线视频观看免费| 日韩精品一区二区三区色欲AV| 亚洲人AV永久一区二区三区久久| 亚洲AV无码片一区二区三区| 国产精品视频一区二区噜噜| 国产一区二区三区福利| 夜精品a一区二区三区| 无码国产精品一区二区免费式芒果| 一区二区三区在线| 精品国产精品久久一区免费式| 亚洲精品无码一区二区| 亚洲无圣光一区二区| 日韩精品无码一区二区三区 | 69福利视频一区二区| 东京热无码一区二区三区av| 午夜视频久久久久一区 | 视频精品一区二区三区| 亚洲av无码一区二区乱子伦as | 一区二区在线电影| 国产精品视频第一区二区三区| 国产品无码一区二区三区在线蜜桃 | 亚洲国产精品一区二区九九| 国产主播福利精品一区二区| 99精品国产一区二区三区2021| 综合久久久久久中文字幕亚洲国产国产综合一区首 | 三上悠亚精品一区二区久久| 一区二区三区高清视频在线观看| 国产福利无码一区在线| 成人毛片一区二区| 波多野结衣一区二区三区高清av| 福利在线一区二区| 国产福利一区二区在线视频 | 无人码一区二区三区视频| 国产麻豆精品一区二区三区v视界| 免费视频一区二区| 国产吧一区在线视频| 日韩高清一区二区| 国产在线精品一区二区不卡麻豆|