vue用vue-concise-slider插件实现网站新闻公告上下滚动(支持移动端)【转】
代码如下:<template><div><div style="width:70%;margin:20px auto;height:40px"><!-- 配置slider组件 --><slider ref="slider" :page
·
代码如下:
<template>
<div>
<div style="width:70%;margin:20px auto;height:40px">
<!-- 配置slider组件 -->
<slider ref="slider" :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
<!-- 设置loading,可自定义 -->
<!--<div slot="loading">loading...</div>-->
</slider>
</div>
</div>
</template>
<script>
import slider from 'vue-concise-slider'// import slider components
export default {
name: 'My',
components: {slider},
data () {
return {
HelloWorld_data: '',
list: ['第一条消息','第二条消息','第三条消息','第四条消息'],
//Image list
pages:[],
//Sliding configuration [obj]
sliderinit: {
pagination: true, // 底部小圆点是否隐藏(true显示,false隐藏)
currentPage: 0, // 当前页码
thresholdDistance:500, // 滑动判定距离
thresholdTime:100, // 滑动判定时间
autoplay:2000, // 自动滚动[ms]
loop:true, // 是否循环滚动
direction:'vertical', // 滚动方向
infinite:1, // 无限滚动前后遍历数
slidesToScroll:1, // 滚动行数
timingFunction: 'ease',
duration: 300
}
}
},
mounted () {
// this.pages.length = this.list.length
for (let i = 0;i < this.list.length;i ++) {
this.pages.push({
html: '<div>' + this.list[i] + '</div>',
style: {
'font-size': '18px',
'color': 'black',
'height': '30px',
'margin': '10px',
'width': '100%'
}
})
// this.pages[i].html = '<div class="slider' + i+1 +'">' + this.list[i] + '</div>'
}
console.log(this.pages)
},
methods: {
// Listener event
slide (data) {
// console.log(data)
},
onTap (data) {
console.log(this.list[data.currentPage])
},
onInit (data) {
// console.log(data)
}
}
}
</script>
<style scoped>
</style>
具体可参考:https://segmentfault.com/a/1190000006581252 和https://warpcgd.github.io/vue-concise-slider/#/config?id=thresholdtime
更多推荐
已为社区贡献9条内容
所有评论(0)