第一步:下载
可以查看官方地址
chenxuan0000
npm i vue-seamless-scroll -save
第二步:引用
import vueSeamlessScroll from "vue-seamless-scroll";
//注册
components: {
vueSeamlessScroll,
},
第三步:使用
<vue-seamless-scroll :data="warnings" :class-option="classOption">
//需要滚动的部分放在这里
</vue-seamless-scroll>
computed: {
classOption() {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: this.warnings.length, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
第四步:给一个例子
<vue-seamless-scroll :data="warnings" :class-option="classOption">
<view class="" v-for="(item, index) in warnings" :key="item.id">
{{ item.name }}
</view>
</vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll';
//数组
// 自动滚动数据
warnings: [
{
id: 1,
name: '李四1'
},
{
id: 2,
name: '李四2'
},
{
id: 3,
name: '李四3'
},
{
id: 6,
name: '李四4'
},
{
id: 4,
name: '李四5'
},
{
id: 5,
name: '李四6'
}
],
//注册
components: {
vueSeamlessScroll
},
computed: {
classOption() {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: this.warnings.length, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
};
}
},
第五步:
如何有点击事件 请按照下面的步骤进行
首先是在 vue-seamless-scroll 添加一个
@click.native="handleClick($event)" 并在方法中添加
需要再每一行 或者 循环的每一个
添加
:data-id=“item.id”
:data-name=“item.name”
:data-obj=“JSON.stringify(item)”
然后再点击的时候再去解析、它(再去做其他的操作)
handleClick($event) {
const all = JSON.parse($event.target.dataset.obj); //这是你每一行 添加的data-名字
console.log(all );
},
<vue-seamless-scroll
:data="warnings"
//添加这个属性
@click.native="handleClick($event)"
:class-option="classOption"
>
<tbody>
<tr
v-for="(item, index) in warnings"
:key="index"
>
<td :data-obj="JSON.stringify(item)" class="events1">
{{ item.date | filterDateTime }}
</td>
<td
:data-obj="JSON.stringify(item)"
:title="item.eventName"
class="events"
>
{{ item.eventName }}
</td>
<td :data-obj="JSON.stringify(item)" class="events1">
{{ item.source | filterType }}
</td>
<td :data-obj="JSON.stringify(item)" class="events1">
{{ item.content }}
</td>
</tr>
</tbody>
</vue-seamless-scroll>
handleClick($event) {
const headId = JSON.parse($event.target.dataset.obj);
},
如果需要其他的,可以自行配置!!