vue swiper 實現滾動條功能(這個可當元件引入使用)
<template>
<swiper :options="swiperOption">
<swiper-slide>
<slot></slot>
</swiper-slide>
<div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
name: 'swiper-example-scroll-container',
title: 'Scroll container',
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOption: {
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
setWrapperSize: true,
scrollbar: {
el: this.swiper-scrollbar ? '.swiper-scrollbar ' : null,
hide: true
}
}
}
},
props:{
scrollbar:{
type: Boolean,
default: true
}
}
}
</script>
<style lang="scss" scoped>
</style>
相關文章
- Vue.js 桌面端自定義滾動條元件|vue美化滾動條VScrollVue.js元件
- vue2.x自定義虛擬滾動條|vue美化滾動條元件VscrollVue元件
- Vue實現浮動按鈕元件 - 頁面滾動時自動隱藏 - 可拖拽Vue元件
- 當vue遇到swiperVue
- 使用 React + Rxjs 實現一個虛擬滾動元件ReactJS元件
- Vue.js+cube-ui(Scroll元件)實現類似頭條效果的橫向滾動導航條Vue.jsUI元件
- vue文字滾動元件Vue元件
- Vue完美記住滾動條和實現下拉載入Vue
- swiper單屏滾動
- css實現隱藏滾動條CSS
- vue 自定義指令實現,滾動條百分比進度條。Vue
- 實現基於React的移動端Swiper元件React元件
- Vue 無限滾動元件Vue元件
- element-ui滾動條元件UI元件
- iOS開發專案實戰——Swift實現ScrollView滾動條功能iOSSwiftView
- 實現一個 Swiper
- vue2.0使用vue-seamless-scroll實現表格平滑滾動Vue
- css實現隱藏滾動條並可以滾動內容CSS
- Delphi中TFlowPanel實現滾動條效果
- 手把手教你實現一個 Vue 進度條元件!Vue元件
- vue3.0使用vue3-seamless-scroll實現表格平滑滾動Vue
- js實現的模擬滾動條效果JS
- 兩種方式實現橫向滾動條
- 實現隨著滾動條滾動,導航會自動切換的效果
- django 實現滾動載入的功能薦Django
- css實現修改預設滾動條樣式CSS
- jQuery實現的設定滾動條的位置jQuery
- 3種方法實現CSS隱藏滾動條並可以滾動內容CSS
- 拖動滾動條實現側欄導航定位效果
- 拖動滾動條實現內容自動載入效果
- Vue路由+Tab元件實現多頁籤功能Vue路由元件
- 不到200行用Vue實現類似Swiper.js的輪播元件VueJS元件
- Vue封裝Swiper實現圖片輪播Vue封裝
- Android實現圖片滾動控制元件Android控制元件
- 原生JS控制多個滾動條同步跟隨滾動JS
- Vue 返回記住滾動條位置詳解Vue
- Vue實現自動觸發功能Vue
- js如何實現將滾動條處於最下端JS