目前我只使用两种方式,如果还有其他方式,希望推荐一下。
1、js+transform
使用定时器动态增加大小,再把值赋给 transform,实现位置偏移,来实现无缝滚动。
html
一定要循环两遍数据,这样的话,会出现两个一样的数据,在一个数据消失后,不会使页面空白,而这时transform归0,有从头开始,因为两个数据相同,归0后视觉上就像无缝滚动。
<div style="height: 100%" @mouseenter="movestar()" @mouseleave="moveleave()">
<table id="rollone" border="1" :style="{transform:'translate(0px,'+flvplayertimer+'px)'}">
<tr v-for="item in tabledata" :key="item.index">
<td width="25%">{{item.fxsj}}</td>
<td width="15%">{{item.gjbh}}</td>
<td width="35%">{{item.pzgs}}个</td>
<td width="25%" style="cursor: pointer" @click="popu(2,item)"><span>详情</span></td>
</tr>
</table>
<table border="1" :style="{transform:'translate(0px,'+flvplayertimer+'px)'}">
<tr v-for="item in tabledata" :key="item.index">
<td width="25%">{{item.fxsj}}</td>
<td width="15%">{{item.gjbh}}</td>
<td width="35%">{{item.pzgs}}个</td>
<td width="25%" style="cursor: pointer" @click="popu(2,item)"><span>详情</span></td>
</tr>
</table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
js
export default {
name: "rolling",
data() {
return {
flvplayertimer:0,
timer:null
}
},
props: {
tabledata: {
type: array
},
},
mounted(){
this.timer = setinterval(()=>{
this.flvplayertimer-=1
if(this.flvplayertimer== -($('#rollone').height())){
this.flvplayertimer =0
}
},100)
// 别忘了定时器清除
this.$once('hook:beforedestroy',()=>{
clearinterval(this.timer);
this.timer = null;
})
},
methods:{
// 鼠标触碰停止
movestar(){
clearinterval(this.timer);
this.timer2 = null;
},
// 鼠标离开始
moveleave(){
this.timer = setinterval(()=>{
this.flvplayertimer-=1
if(this.flvplayertimer== -($('#rollone').height())){
this.flvplayertimer =0
}
},100)
},
}
}
1
2
3
4
5
6
7
8
9
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
css
.fxlx{
height: 16vh;
width: 100%;
table,table tr td {
border:1px solid rgba(41,143,229,0.3);
}
table{
width: 90%;
margin: 0 auto;
th{
opacity: 0.7;
background: linear-gradient(rgba(53,123,203,0.7), rgba(9,57,113,0.7));
font-size: 9rem;
font-family: pingfang sc regular, pingfang sc regular-regular;
font-weight: 400;
color: #ffffff;
height: 28rem;
}
td{
opacity: 0.8;
font-size: 9rem;
height: 30rem;
font-family: pingfang sc regular, pingfang sc regular-regular;
font-weight: 400;
color: #ffffff;
background:#001c38
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2、使用vue-seamless-scroll插件
1、安装vue-seamless-scroll
npm install vue-seamless-scroll --save
1
2、引入组件
在某些时候实际页面渲染后会出现点击事件失效的情况。这个问题是因为vue-seamless-scroll是用重复渲染一遍内部元素来实现滚动的,而js的onclick只检测页面渲染时的dom元素。记得在入门原生js的时候也经常会遇见这个问题,经过一般百度,采用事件委托的方式解决。
在section上绑定事件handleclick,捕获点击的dom节点。事件中需求的数据可以直接用data绑在相应的dom上。
<div class="my-inbox" @click.stop="handleclick($event)">
<vue-seamless-scroll :data="sendval.body" :class-option="defaultoption">
<!-- <div v-for="(item, index) in sendval" :key="index" @click="jump(item)">-->
<!-- <div class="wfjl1" v-show="index % 2 == 0">{{ item }}</div>-->
<!-- <div class="wfjl2" v-show="index % 2 == 1">{{ item }}</div>-->
<!-- </div>-->
<table ref="movebox">
<tr v-for="(item, index) in sendval.body" :key="index">
<td
:data-obj="json.stringify(item)"
:id="'xzq' + index"
width="15%"
>
{{ item.range }}
</td>
<td
:data-obj="json.stringify(item)"
:id="'wflx' + index"
width="20%"
>
{{ item.wflx }}
</td>
<td :data-obj="json.stringify(item)" :id="'sj' + index" width="25%">
{{ item.sbsj }}
</td>
<td :data-obj="json.stringify(item)" :id="'zt' + index" width="20%">
<img
style="width: 71rem; height: 34rem; margin: 5rem 0"
:src="item.image_result"
/>
</td>
</tr>
</table>
</vue-seamless-scroll>
</div>
1
2
3
4
5
6
7
8
9
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
js
import vueseamlessscroll from "vue-seamless-scroll";
export default {
name: "my-marquee-top",
props: {
sendval: object,
},
data() {
return {
isshow: true,
time: "",
url: "",
};
},
components: {
vueseamlessscroll,
},
computed: {
defaultoption() {
return {
step: 0.2, // 数值越大速度滚动越快
limitmovenum: 2, // 开始无缝滚动的数据量 this.datalist.length
hoverstop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openwatch: true, // 开启数据实时监控刷新dom/
};
},
},
methods: {
handleclick(item) {
let message = json.parse(item.target.dataset.obj);
this.$emit("jump", message);
},
}
},
};```
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。