本帖最后由 AMay 于 2019-7-14 17:46 编辑
【简介】 vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端。特点是:配置简单、轻量(17kb)、多种滑动样式
【可以实现的功能】 全屏自适应 移动端兼容 垂直滚动 定时自动切换 不定宽度滚动 无缝循环滚动 多级滚动
【当前demo步骤】 1. 先使用vue-cli搭建起一个vue的脚手架 详情查看--【广州前端】vue-cli脚手架一看就懂的入门教程 2. 安装包 [AppleScript] 纯文本查看 复制代码 npm install vue-concise-slider --save
【代码】 [HTML] 纯文本查看 复制代码 <template>
<!-- 制作一个框架包裹slider,设置宽度和高度 -->
<div style="width:100%;margin:20px auto;height:400px">
<!-- 配置slider组件 -->
<slider ref="slider" :options="options">
<!-- 使用slideritem组件 -->
<slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
<!-- 设置loading,可自定义 -->
<div slot="loading">loading...</div>
</slider>
</div>
</template>
<script>
// import slider components
import { slider, slideritem } from 'vue-concise-slider'
export default {
el: '#app',
data () {
return {
//data list [array]
someList:[
{
html: 'slide1',
style: {
'background': '#1bbc9b'
}
},
{
html: 'slide2',
style: {
'background': '#4bbfc3'
}
},
{
html: 'slide3',
style: {
'background': '#7baabe'
}
}
],
//Slider configuration [obj]
options: {
currentPage: 0
}
}
},
components: {
slider,
slideritem
}
}
</script>
【效果图】
【参数】 [size=10.5000pt]1. pages/初始化参数 Option | | | | | | | 当前设置为每页的标题,未来将直接输出html [size=10.5000pt] | | | | 直接作用在每个item上的style样式,可以输出背景图,背景色,每项宽度可自定义,自动切换为不定宽滚动 [size=10.5000pt] |
[size=10.5000pt]2. sliderinit/初始化参数 Option | | | | | | | 方向设置,默认为水平滚动('horizontal'),可设置为垂直滚动('vertical') | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
[size=10.5000pt]3. API/父级传递的事件 Method | | | | | | | childComponents.$emit('slideTo', num) | | | | childComponents.$emit('slideNext') | | | | childComponents.$emit('slidePre') |
[size=10.5000pt]4. API/父级监听的事件 Method | | | | | | | childComponents.$on('slide', function(pagenum){console.log(pagenum)}) |
|