设置 limitMoveNum 为 2，当动态修改 list 为 1 条数据时，滚动没有停止

[kawhi66]

我的配置如下：

{
  hoverStop: false,
  limitMoveNum: 2,
  singleHeight: 24,
  waitTime: 2500
}

当动态修改 data 只剩下 1 条数据时，动画没有停下来

[kawhi66]

代码 305 行： this._cancel() 似乎没有生效。

我试着做了如下修改：

const unWatch = this.$watch("reqFrame", (newVal, oldVal) => {
  if(newVal !== oldVal) {
    cancelAnimationFrame(this.reqFrame);
    unWatch();
  }
 });

看上去解决了这个问题，不确定会不会引起其他问题。

[chenxuan0000]

@kawhi66 我用你的配置尝试了下是没有问题的，你确认下this.moveSwitch状态,为true是不能继续滚动。会进入calcel逻辑。

[kawhi66]

是 true，我反复确认过。也确实走到了 cancel 的逻辑里面，但实际上没有 cancel 掉。 注意是数据动态修改为只剩下一条时会发生

[chenxuan0000]

@kawhi66 方便的话，代码精简下贴出来我看下。

[kawhi66]

<template>
<div class="h-topbar">
    <div class="h-topbar-nav" ref="topbarNav">
        <h-badge :count="messageList.length" class-name="omp-badge" style="margin-top:18px;margin-right:36px;">
            <h-icon name="ios-bell" size="20" color="#c96066"></h-icon>
        </h-badge>
        <-- 这里是个第三方的 popup 组件，可能跟这个有关系，我不确定  !-->
        <h-poptip v-if="messageList.length" trigger="hover" transfer placement="bottom-start">
            <vue-seamless-scroll :data="messageList" :class-option="messageConfig" class="message-wrapper">
                <ul class="message-inner">
                    <li v-for="({serial_no, message}, index) in messageList" :key="index">{{message}}</li>
                </ul>
            </vue-seamless-scroll>
            <div slot="content" class="pop-up-box">
                <ul class="flex-column">
                    <li v-for="({serial_no, menu_url, message, isIgnore}, index) in messageList" :key="index" class="flex-row" :class='{"mt5": index > 0}'>
                        <p class="message-in-box pointer" :class='{"ignore": isIgnore}' @click="jump(menu_url)">{{message}}</p>
                        <h-button type="ghost" class="omp-msg-ignore-btn" :disabled="isIgnore" @click="ignore_message(serial_no, index)">忽略</h-button>
                    </li>
                </ul>
            </div>
        </h-poptip>
    </div>
</div>
</template>

<script>
import common_render from "@/mixins/commonRender";
import {
    mapGetters
} from "vuex";
export default {
    mixins: [common_render],
    components: {
        LockScreen: () => import("@/components/LockScreen"),
        VueSeamlessScroll: () => import("@/components/content/myClass")
    },
    data() {
        return {
            userName: window.sessionStorage.getItem("OperatorName"),
            locktime: this.LOCAL_CONFIG.LOCK_TIME,
            sysName: this.LOCAL_CONFIG.SYS_NAME,
            showMore: false,
            hideNavList: [],
            messageList: [],
            messageConfig: {
                hoverStop: false,
                limitMoveNum: 2,
                singleHeight: 24,
                waitTime: 2500
            }
        };
    },
    methods: {
        fetch_message() {
            this.Fetch("5430353", Object.assign({
                message_status: 1
            }, (() => {
                const {
                    length: len
                } = this.messageList;
                let time;

                if (len > 0 && this.messageList[len - 1].hasOwnProperty("time")) {
                    time = this.messageList[len - 1]["time"];
                } else {
                    time = 0;
                };

                return {
                    time
                };
            })())).then(({
                gs_messageqryout_list
            }) => {
                this.messageList = gs_messageqryout_list;
            })
        },
        ignore_message(serial_no, index) {
            this.messageList.slice(index, 1);
        }
    },
    created() {
        if (this.timer) {
            clearInterval(this.timer);
        } else {
            this.fetch_message();
            // this.timer = setInterval(this.fetch_message, 10 * 1000);
        }
    }
};
</script>