因为要做一个无缝滚动的判断，在这里我用到了vue-seamless-scroll，但是因为要加一些判断，所以对它进行了一些改动，在求助之后才把问题解决，也是心累了。
1、安装
npm install vue-seamless-scroll --save
2、配置
2-1 全局配置
在main.js中，正常配置是：
import scroll from 'vue-seamless-scroll'
Vue.use(scroll);
由于原来的vue-seamless-scroll里面的功能满足不了如何根据容器的高度来判断什么时候滚动，所以对组件有改动，这里在main.js里面需要重新配置,这里引入的是vue-seamless-scroll/src里面的myClass，使用方法跟之前的一样，
import scroll from 'vue-seamless-scroll/src'
Vue.use(scroll);
2-2 局部配置
在不安装vue-seamless-scroll的情况下，直接在当前页面引入myClass.vue，我这里把myClass.vue改成了marquee.vue，使用方法为
引入
使用
设置
2-3 局部修改
myClass.vue里面改动的地方为moveSwitch()
改动前：根据数据长度来判断
改动后：根据外层容器高度来判断
3、使用
<template>
<div class="router1">
<div class="flex wd800">
<div class="options" style="color:#357edd;">
<p>
<b>demo1</b> 向上无缝滚动,hover可停止</p>
var option = {<br/> step: 0.5,<br/> limitMoveNum: 1<br/> }
</div>
<div>
<vue-seamless-scroll :data="listData" class="warp" :class-option="classOption">
<ul class="item" ref="listItem">
<li target="_blank" href="http://www.baidu.com" v-for="item in listData" style="width: 300px;">
<span class="title" v-html="item.value" style="display: block"></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</template>
<script>
import {apiGet} from "../../api/api";
export default {
data () {
return {
listItemHeight:"",
listData: [],
}
},
props: {},
computed: {
classOption () {
return {
step: 0.5,
limitMoveNum: 1,//这个是修改moveSwitch()之前的使用方法，这里的数值指的是数据条数
openTouch: false,
}
}
},
created(){
this.getData()
},
methods: {
getData(){
let url='api/mock/trueExam.do?id=154167029200312001515'
apiGet(this,url).then(res=>{
console.log(res);
let data=res
let arr=[]
data.forEach(item=>{
arr.push({
value:item.content
})
})
console.log(arr)
this.listData=arr
})
},
},
}
</script>
<style lang="scss" scoped>
.options {
width: 300px;
font-size: 15px;
margin-right: 60px;
p {
color: #000;
margin-bottom: 30px;
b {
font-size: 16px;
font-style: italic;
}
}
}
.clearfix {
zoom: 1;
&:after {
display: block;
height: 0;
clear: both;
content: '.';
visibillity: hidden;
}
}
.wd800 {
width: 800px;
margin: 30px auto;
}
.warp {
height: 260px;
width: 360px;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li{
display: block;
/*height: 30px;*/
line-height: 1.5;
display: flex;
justify-content: space-between;
font-size: 15px;
}
}
}
@media screen and (max-width: 770px) {
.warp {
width: 90%;
margin: 0 auto;
}
body {
background-color: lightblue;
}
.wd800 {
width: 100%;
}
.flex.wd800 {
display: block;
}
.options {
width: 90%;
margin: 20px auto;
p {
margin-bottom: 0;
}
}
}
</style>
这个是基本的使用，相关的配置参数介绍如下
| key | description | default | val |
|---|---|---|---|
step |
数值越大速度滚动越快 | 1 |
Number |
limitMoveNum |
开启无缝滚动的数据量 | 5 |
Number |
hoverStop |
是否启用鼠标hover控制 | true |
Boolean |
direction |
方向 0 往下 1 往上 2向左 3向右 | 1 |
Number |
openTouch |
移动端开启touch滑动 | true |
Boolean |
singleHeight |
单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 | 0 |
Number |
singleWidth |
单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 | 0 |
Number |
waitTime |
单步停止等待时间(默认值1000ms) | 1000 |
Number |
switchOffset |
左右切换按钮距离左右边界的边距(px) | 30 |
Number |
autoPlay |
是否自动播放使用switch切换时候需要置为false | true |
Boolean |
switchSingleStep |
手动单步切换step值(px) | 134 |
Number |
switchDelay |
单步切换的动画时间(ms) | 400 |
Number |
switchDisabledClass |
不可以点击状态的switch按钮父元素的类名 | disabled |
String |
isSingleRemUnit |
singleHeight and singleWidth是否开启rem度量 | false |
Boolean |
4、个别特殊配置项说明
4-1、moveSwitch()修改后的使用
<template>
<div class="wrappers">
<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
<ul class="item" id="itemIntroduce">
<li v-for="item in listData" style="width: 500px;">
<span class="date" v-html="item.value"></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</template>
<script>
import {apiGet} from "../../api/api";
export default {
name: 'scroll',
data () {
return {
listData:[],
heightIntroduce:'',
flag:true,
}
},
computed:{
return {
step:0,
limitMoveNum:160,//这里的limitMoveNum指的是修改后的参数，是容器的高度
hoverStop:true,
autoPlay: false
}
},
created(){
this.getData()
},
methods:{
getData(){
let url='api/mock/trueExam.do?id=153984565046212001305'
// let url='api/mock/trueExam.do?id=154167029200312001515'
apiGet(this,url).then(res=>{
let data=res
let arr=[]
data.forEach(item=>{
arr.push({
value:item.content
})
})
this.listData=arr
})
},
heights(){
let $itemIntroduce=document.getElementById("itemIntroduce") //获取内部容器的高度
this.heightIntroduce=$itemIntroduce.clientHeight//将内部容器高度赋值，
//然后在computed里面计算它的高度，计算宽度可以用clientWidth
}
},
mounted(){
this.getData() //获取数据在created里面调一次，在mounted里面更新一次
},
updated(){
this.heights() //在updated里面调取获取高度的方法
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.wrappers{
background: #ddd;
.seamless-warp{
width: 500px;
height: 160px;
overflow: hidden;
span{
display: block;
line-height: 1.5;
font-size: 20px;
}
}
}
</style>
4-2 修改后的配置
这个是修改后的使用，修改的配置参数介绍如下
| key | description | default | val |
|---|---|---|---|
limitMoveNum |
开启无缝滚动的高度 | 50 |
Number |
4-3 重要的事说三遍
在参数配置中，如果使用autoplay属性，必须要在v-for的标签上加width属性,否则页面排版会有问题
网友评论