vue无缝滚动
vue无缝滚动插件地址:https://chenxuan1993.gitee.io/component-document/index_prod#/component/svg-bar-default
·
vue无缝滚动插件地址:https://chenxuan1993.gitee.io/component-document/index_prod#/component/svg-bar-default
1.安装插件
npm install vue-seamless-scroll --save
2.引入main.js
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
3.页面引入
<template>
<vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
<ul class="item">
<li v-for="item in listData" style='display:flex;justify-content:space-between;'>
<div class="date">{{item.title}}</div>
<div class="date">{{item.date}}</div>
</li>
</ul>
</vue-seamless-scroll>
</template>
<script>
export default {
name: "homepage",
data() {
return {
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}]
}
},
computed: {
optionHover () {
return {
waitTime: 2500,//时间
limitMoveNum: 8,//多少条开始滚动
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, //是否悬停
}
}
},
}
</script>
<style lang="scss" scoped>
.seamless-warp {
height: 1.8rem;
overflow: hidden;
width:100%;
}
.item{
/*list-style-type:none;*/
border:0;
margin: 0;
width:100%;
padding:0
}
.date{
height:0.2rem;
font-size:0.08rem
}
</style>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)