vue 滚动组件踩坑记录

滚动表格

在vue页面中实现表格的定时滚动，在网上找了类似的组件（vue-seamless-scroll ），但是有一个致命的问题就是，

<div v-html="copyHtml" :style="float"></div>

在组件中封装的v-html解析渲染，绑定的事件丢失

---

解析：由于HTML代码是静态的，并不会被Vue进行编译和解析，因此默认情况下v-html指令渲染的代码是不会绑定事件的。所以，在上述代码中使用v-html指令渲染的内容是无法触发点击事件的。

---

如：<a @click="show(1)"></a>，a标签能成功渲染，但其绑定的事件无法触发。

解决办法：找到一个循环滚动列表插件 ------@david-j/vue-j-scroll

该插件为 vue-seamless-scroll 的升级版 ，可以自动滚动也可以手动滚动。dom 中的事件也保存了下来。 推荐数据量小于 1000，以保证插件的性能。

npm install @david-j/vue-j-scroll --save-dev 来安装

在src根目录下的引用页面进行引入;根据项目结构而定(main.js)
import VueScroll from '@david-j/vue-j-scroll'; 
Vue.use(VueScroll);

 

 <vue-j-scroll
      class="list-style"
      :data="shipList"
      :steep="1"
      scrollDirection="top"
      :isRoller="true"
      :rollerScrollDistance="50"
      :class-option="{singleHeight: 40,waitTime: 1500,limitMoveNum: 6}"
    >
        <div
          v-for="(item, index) in shipList"
          :key="index"
          class="table-item table_body"
        >
          <p>{{ item}}</p>
        </div>
    </vue-j-scroll>

 配置项：

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	1.1.17版本前手动切换时候需要置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean
navigation	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	false	Boolean

注意： 因为该组件中，在数据量很少的情况下，比如你设置的limitMoveNum = 6，但是后端返回的数据在你定义的数组中:data="shipList",this.shipList.length < 6，此时在表格中的数据会出现数据煽动，不稳定的情况，此时，直接遍历数组，不使用该组件就不会出现该情况；

 下面是我代码中的案例：

<div class="h35 data_body__btm">
    <div class="visual_box">
        <ul class="table-item table_header">
            <li style="width: 10%">序号</li>
            <li style="width: 15%">中文船名</li>
            <li style="width: 15%">英文船名</li>
            <li style="width: 10%">航次</li>
            <li style="width: 10%">装港码头</li>
            <li style="width: 10%">预计到港时间</li>
            <li style="width: 10%">实际到港时间</li>
            <li style="width: 10%">靠泊时间</li>
            <li style="width: 10%">开港时间</li>
        </ul>
        <vue-j-scroll
            class="list-style"
            :data="shipList"
            :steep="1"
            scrollDirection="top"
            :isRoller="true"
            :rollerScrollDistance="10"
            :class-option="{singleHeight: 40,waitTime: 1500,limitMoveNum: 6}"
            style="height: calc(100% - 40px);overflow:hidden;"
            v-if="shipList.length>=6"
        >
                    <ul class="table-item table_body" v-for="(item, index) in shipList" :key="index" @click="handleShipTable(item)">
                        <li style="width:10%">{{ index + 1 }}</li>
                        <li style="width:15%">{{ (item.vesselCn || "-") }}</li>
                        <li style="width:15%">{{ (item.vesselEn || "-") }}</li>
                        <li style="width:10%">{{ (item.voyageEn || "-") }}</li>
                        <li style="width:10%">{{ (item.workAreaName || "-") }}</li>
                        <li style="width:10%">{{ (item.arrivaLdate || "-") }}</li>
                        <li style="width:10%">{{ (item.realArrivalDate || "-") }}</li>
                        <li style="width:10%">{{ (item.bearthDate || "-") }}</li>
                        <li style="width:10%">{{ (item.openPortDate || "-") }}</li>
                    </ul>
        </vue-j-scroll>
        <div v-else>
            <ul class="table-item table_body" v-for="(item, index) in shipList" :key="index" @click="handleShipTable(item)">
                <li style="width:10%">{{ index + 1 }}</li>
                <li style="width:15%">{{ (item.vesselCn || "-") }}</li>
                <li style="width:15%">{{ (item.vesselEn || "-") }}</li>
                <li style="width:10%">{{ (item.voyageEn || "-") }}</li>
                <li style="width:10%">{{ (item.workAreaName || "-") }}</li>
                <li style="width:10%">{{ (item.arrivaLdate || "-") }}</li>
                <li style="width:10%">{{ (item.realArrivalDate || "-") }}</li>
                <li style="width:10%">{{ (item.bearthDate || "-") }}</li>
                <li style="width:10%">{{ (item.openPortDate || "-") }}</li>
            </ul>
        </div>
    </div>
</div>

css代码：

 .data_body__btm {
                padding-top: 10px;
                .table-item {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    border-bottom: 1px solid #124881;
                    box-sizing: border-box;
                    li {
                        text-align: center;
                        color: #fff;
                        font-size: 14px;
                        flex-shrink: 0;
                        padding: 0 5px;
                    }
                }
                .table_header {
                    height: 50px;
                    background: #0d3a77;
                    border-bottom: 0;
                    li {
                        font-weight: bold;
                        font-size: 14px;
                    }
                }
                .table_body {
                    cursor: pointer;
                    &:hover {
                        background: #0d3a77;
                    }
                }
            }

查找资料出处：@david-j/vue-j-scroll - npm

https://madewith.cn/74 

vue-seamless-scroll的简介及使用教程 - Made with Vuejs