标签：style vue pt concise number slider 10.5000 size
【简介】 vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端。特点是：配置简单、轻量（17kb）、多种滑动样式【可以实现的功能】 全屏自适应 移动端兼容 垂直滚动 定时自动切换 不定宽度滚动 无缝循环滚动 多级滚动
【当前demo步骤】 1. 先使用vue-cli搭建起一个vue的脚手架 详情查看--【广州前端】vue-cli脚手架一看就懂的入门教程 2. 安装包 [AppleScript] 纯文本查看 复制代码 ?
| 1 |
npm install vue-concise-slider --save
|
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<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>
|
【效果图】 <ignore_js_op>
【参数】 [size=10.5000pt]1. pages/初始化参数
| Option | Type | Default | Description |
| title | string | [size=10.5000pt]- | 当前设置为每页的标题，未来将直接输出html [size=10.5000pt] |
| style[size=10.5000pt] | obj | [size=10.5000pt]- | 直接作用在每个item上的style样式，可以输出背景图，背景色，每项宽度可自定义，自动切换为不定宽滚动 [size=10.5000pt] |
| Option | Type | Default | Description |
| direction | string | 'horizontal' | 方向设置，默认为水平滚动('horizontal'),可设置为垂直滚动('vertical') |
| currentPage | number | [size=10.5000pt]- | 当前为第几页 |
| thresholdDistance | number | [size=10.5000pt] | 滑动距离阈值 |
| thresholdTime | number | [size=10.5000pt] | 滑动时间阈值 |
| autoplay | Number[ms] | [size=10.5000pt] | 自动播放:时间[ms] |
| loop | boolean | [size=10.5000pt] | 循环滚动 |
| infinite | number | [size=10.5000pt] | loop无缝滚动时,可以设置前后遍历数 |
| slidesToScroll | number | [size=10.5000pt] | 每次滑动切换的页数 |
[size=10.5000pt]3. API/父级传递的事件
| Method | Parameters | Description | Example |
| slideTo | number | 滑动到(number)页 | childComponents.$emit('slideTo', num) |
| slideNext | [size=10.5000pt] | 滑动到下一页 | childComponents.$emit('slideNext') |
| slideTo | [size=10.5000pt] | 滑动到上一页 | childComponents.$emit('slidePre') |
[size=10.5000pt]4. API/父级监听的事件
| Method | Parameters | Description | Example |
| slide | number | 当前滑动到第(number)页 | childComponents.$on('slide', function(pagenum){console.log(pagenum)}) |
更多技术资讯可关注：gzitcast
标签：style,vue,pt,concise,number,slider,10.5000,size 来源： https://www.cnblogs.com/heimaguangzhou/p/11394844.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。