vue-seamless-scroll列表滚动插件
- 插件demo 地址https://chenxuan0000.github.io/component-document/index_prod.html#/component/seamless-switch
安装 vue-seamless-scroll
1
npm install vue-seamless-scroll --save
main.js引入插件
1
2import scroll from 'vue-seamless-scroll'
Vue.use(scroll)使用组件使新闻裂变上下滚动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<div class="warning">
<vue-seamless-scroll :data="warnList" class="warp" :class-option="classOption">
<ul class="item">
<li v-for="(item,index) in warnList" :key="index">
<span class="regionName" v-html="item.regionName"></span>
<span class="buildName">{{item.buildName}}</span>
<span class="warnInfo">{{item.warnInfo}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
export default {
computed: {
classOption () {
return {
step: 0.1,
limitMoveNum: 1,//这个是修改moveSwitch()之前的使用方法，这里的数值指的是数据条数
openTouch: false,
}
}
},
}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.mapWrap .asideRight .rightWrap .warning{
width:100%;
height: 100%;
padding:10px 20px;
position: relative;
overflow: hidden;
}
.warning ul li{
box-sizing: border-box;
height: 25px;
line-height: 25px;
font-size: 12px;
color:#fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: flex;
text-indent: 5px;
}
.warning ul li:nth-child(even) {
background-color:#164982;
}
.warning ul li .regionName{
flex:1;
padding-left: 5px;
}
.warning ul li .buildName{
flex:1.3;
}
.warning ul li .warnInfo{
flex:1;
}
//滚动重点 否则不显示
.warp{
position: absolute;
width:90%;
height:94%;
}
