vue 仿 PC 端 163music 圖片滾動組件

xyc2008 8年前發布 | 8K 次閱讀 Vue.js Vue.js開發

vue-image-scroll

一個模仿網易云音樂的vue圖片滾動插件

Live Demos

Documention

based on vue 2.0

Install

npm install vue-image-scroll

Local

git clone  https://github.com/ShanaMaid/vue-image-scroll.git


安裝依賴


npm install


啟動


npm run dev</code></pre> 
  
Usage
 
  
<template>
  <div>
    <slider v-bind="setting">
  </div>
</template>


<script>
import slider from 'vue-image-scroll';


export default {
  components: {
    slider
  },
  data: function() {
    return {
      setting: {
        imgSrc: ['1.jpg', '2.jpg', '3.jpg']
      }
    }
  }
}
</script></code></pre> 
  
Update
 
  
     
   
  • finish basics
    •  
   
  • image add tagName and tagStyle
    •  
  
 
  
Opitions
 
  
Props
 
  
 
    
    
 
     Props 
     Type 
     Default 
     Description 
    
 
    
    
    
 
     styleObject 
     Object 
     {width:'750',height:'240'} 
     scroll box style,please use lower camel case, eg: background-color => backgroundColor 
    
 
    
 
     image 
     Array 
     null 
     imgae source path ,tagName,tagStyle; length >= 3 
    
 
    
 
     interval 
     Integer 
     2000 
     unit: ms, rolling interval 
    
 
    
 
     imgStyle 
     Object 
     null 
     image style, the same as styleObject 
    
 
    
 
     autoRoll 
     Boolean 
     true 
     true or false 
    
 
    
 
     direction 
     String 
     left 
     scroll direction, left or right 
    
 
    
  
 
  
To do
 
  
     
   
  • Basics
    •  
   
  • add tag for image
    •  
  
 
  
more!!
 
  
License
 
  
MIT
 
  
 
 
  
 
 
  
 
 本文由用戶 xyc2008 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！