VUE中使用滚动组件-vueSeamlessScroll
vue中滚动;vueSeamlessScroll组件
·
滚动实例
1.安装
npm install --save vue-seamless-scroll
2.引入组件vueSeamlessScroll
import vueSeamlessScroll from 'vue-seamless-scroll'
3.注册组件
components: {
vueSeamlessScroll
}
4.使用组件,外层需要包一个盒子content,content样式设置(overflow: hidden; max-height: 具体数值)
<div class="content">
<vue-seamless-scroll
// 方法一:data数据传递;或者使用方法二:computed数据传递
:class-option="classOption"
:data="info"
>
<!--包ul和li-->
</vue-seamless-scroll>
</div>
5.数据配置
5.1data中配置
// classOption配置动态传递给class-option
classOption: {
// 滚动速度
step: 0.4,
// 鼠标悬停停止滚动
hoverStop: true,
// 滚动组数
limitMoveNum: 2,
// 监听刷新
openWatch: true
},
// 网络请求过来的数据动态传递给data
info: []
5.2computed中配置
computed: {
classOption () {
return {
// 滚动速度
step: 0.4,
// 鼠标悬停停止滚动
hoverStop: true,
// 滚动组数
limitMoveNum: 2,
// 监听刷新
openWatch: true
}
}
}
6.必须使用ul和li标签
<ul class="item-box">
<li
class="item"
v-for="item in info"
:key="item.time"
>
相关内容
</li>
</ul>
7.整体实例框架
<!-- 内容开始 -->
<div class="content">
<vue-seamless-scroll
:class-option="classOption"
:data="info"
>
<ul class="item-box">
<li
class="item"
v-for="item in info"
:key="item.time"
>
相关内容
</li>
</ul>
</vue-seamless-scroll>
</div>
<!-- 内容结束 -->
更多推荐
已为社区贡献4条内容
所有评论(0)