vue-seamless-scroll 数据量少的文本，下拉后开始滚动直到消失

数据量少的文本，下拉后开始滚动直到消失，不会重复

想要让文本数据量少时不再滚动，或者让这条数据还能重复出现，有什么好办法吗

没看懂你想解决什么问题，是下拉框有问题还是什么意思？

“文本数量少的时候不会滚动”  你现在的问题
“想要让文本数据量少时不再滚动，或者让这条数据还能重复出现”  你的诉求

试试这个呢

<!-- 查看端 异常汇总页面 -->
<template>
  <div id="view">
    <head-part :href="role==1?'/exaMain':'/main'" title="异常因素汇总" class="bx"></head-part>
    <div class="tm_c bx flex-ju-sp" style="align-items:center;">
      <div style="width: 30%;">
        <el-select v-model="value" placeholder="选择因素" popper-class="font12" @change="handleClick" size="mini">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="flex-al-c flex-ju-end font12">
        <span class="flex-al-c" @click="impChange(1)" :class="[imp==1?'ck':'']"><span
            class="d red"></span>&nbsp;紧急&nbsp;</span>
        <span class="flex-al-c" @click="impChange(2)" :class="[imp==2?'ck':'']"><span
            class="d yell"></span>&nbsp;重要&nbsp;</span>
        <span class="flex-al-c" @click="impChange(3)" :class="[imp==3?'ck':'']"><span
            class="d grey"></span>&nbsp;普通</span>
      </div>
    </div>
    <div class="tabs">
      <div class="tb_top bg-white">
        <el-tabs v-model="activeName" stretch @tab-click="handleClick" class="font18">
          <el-tab-pane label="主桥" name="0" class="font18 ft_b"></el-tab-pane>
          <el-tab-pane label="便桥" name="1" class="font18 ft_b"></el-tab-pane>
          <el-tab-pane label="围堰" name="2" class="font18 ft_b"></el-tab-pane>
          <el-tab-pane label="支架" name="3" class="font18 ft_b"></el-tab-pane>
        </el-tabs>
        <div id="Top" class="po-re">
          <span class="err_tit">
            时间异常
          </span>
          <div class="po-ab">
            <vue-seamless-scroll :data="proDelayList" class="seamless-warp" :class-option="classOption">
              <div class="unit" v-for="(fit, index) in proDelayList" :key="'ks'+index"
                @click="jump('/leaSpeed',{'time':fit.HappenDate,'id':fit.Id,'single':true})">
                <div class="l_h24"> <b>项目:&nbsp;</b><span>&nbsp;{{ fit.ProjectName }}&nbsp;</span></div>
                <div class="l_h24"><span>实际开始提前或延迟天数：&nbsp;</span><span
                    :class="[fit.ActualStartResult>0?'color_red':'']">&nbsp;{{ fit.ActualStartResult>0?'+':'' }}{{ fit.ActualStartResult }}&nbsp;</span>天
                </div>
                <div class="l_h24"><span>实际完成提前或延迟天数：&nbsp;</span><span
                    :class="[fit.ActualFinshResult>0?'color_red':'']">&nbsp;{{ fit.ActualFinshResult>0?'+':'' }}{{ fit.ActualFinshResult }}&nbsp;</span>天
                </div>
                <div class="line"></div>
              </div>
            </vue-seamless-scroll>
            <div v-if="proDelayList.length<1" class="flex-ju-c flex-al-c" style="width: 100%;height: 60px;text-align: center;">
              暂无数据
            </div>
          </div>
        </div>
      </div>
      <div id="Btm" class="tb_bom bg-white po-re">
        <span class="err_tit">
          其他异常
        </span>
        <div class="po-ab">
          <vue-seamless-scroll :data="proFinList" class="seamless-warp" :class-option="classOption">
            <div class="unit" v-for="(fit, index) in proFinList" :key="'jum'+index"
              :class="fit.DegreeType==1?'color_red':fit.DegreeType==2?'color-deepYellow':''"
              @click="jump('/leaAbnormal',{'time':fit.AbnormalDate,'id':fit.Id,'single':true})">
              <div class="l_h24">
                <b>项目:</b>{{ fit.ProjectName }}({{ fit.AbnormalDate }})
              </div>
              <div class="l_h24 l_2">
                {{ fit.Details }}
              </div>
              <div class="line"></div>
            </div>
          </vue-seamless-scroll>
          <div v-if="proFinList.length<1" class="flex-ju-c flex-al-c" style="width: 100%;height: 60px;text-align: center;">
            暂无数据
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      role: this.$store.state.role, // 当前登录角色
      options: [{
        label: '全选',
        value: null
      },
      {
        label: '其他因素',
        value: 0
      },
      {
        label: '技术因素',
        value: 1
      },
      {
        label: '人员因素',
        value: 2
      },
      {
        label: '设备因素',
        value: 3
      },
      {
        label: '材料因素',
        value: 4
      },
      {
        label: '安全因素',
        value: 5
      },
      {
        label: '自然因素',
        value: 6
      },
      {
        label: '甲方因素',
        value: 7
      },
      {
        label: '质量因素',
        value: 8
      }
      ],
      value: null,
      activeName: '0',
      proDelayList: [], // 项目延迟数据
      proFinList: [], // 项目延迟数据
      imp: '0' // 重要程度
    }
  },
  computed: {
    classOption () {
      return {
        step: 0.5, // 数值越大速度滚动越快
      }
    }
  },
  created () {

  },
  mounted () {
    this.tabChange()
  },
  methods: {
    handleClick (tab, event) {
      this.tabChange()
    },
    // 重要程度切换
    impChange (num) {
      if (this.imp == num) {
        this.imp = '0'
      } else {
        this.imp = num
      }
      this.tabChange()
    },
    // 获取数据
    tabChange () {
      let _this = this
      let tips
      _this.proFinList = []
      _this.proDelayList = []
      this.$post('Home/GetAbnormalTotal', {
        'abnormalType': _this.value,
        'proClass': _this.activeName,
        'degreeType': _this.imp
      }).then(res => {
        if (res.Success) {
          _this.proFinList = res.Data.dataOne;
          _this.proDelayList = res.Data.dataTwo;
        }else{
          _this.proFinList = [];
          _this.proDelayList = [];
        }
      })
    },
    // 页面跳转
    jump (href, t) {
      const self = this
      setTimeout(() => {
        self.$router.push({
          path: href,
          query: t
        })
      }, 100)
    }
  }
}
</script>
<style scoped lang="scss">
  @import '@/assets/css/globals.scss';

  .bx {
    background: $moduleBg;
    margin-bottom: 4px;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
  }

  .tm_c {
    padding-top: 0;
    height: 7.4vh;
    line-height: 7.4vh;
  }

  .tm_c .el-input__inner {
    border: 1px solid $fontColor;
    color: $fontColor;
  }

  .d {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  .color_red {
    color: #E84854;
  }

  .red {
    background: #E84854;
  }

  .yell {
    background: #FAAD14;
  }

  .grey {
    background: $iconColor;
  }

  .ck {
    color: $themeColor;
  }

  .font12 {
    font-size: 12px;
  }

  .font18 {
    font-size: 18px;
  }

  .height37 {
    height: 3.7vh;
  }

  .tabs {
    width: 91.4%;
    margin: 11px auto;
    height: calc(92.6vh - 66px);

    .tb_top {
      height: 35%;
      padding: 20px;
      padding-top: 0;
      padding-bottom: 5px;
      box-sizing: border-box;

      #Top {
        height: calc(100% - 54px);
        overflow: hidden;

        .po-ab {
          width: 100%;
          height: calc(100% - 32px);
          overflow: hidden;
        }
      }
    }

    .tb_bom {
      height: calc(65% - #{$moduleIntervalS});
      padding: 20px;
      margin-top: $moduleIntervalS;
      box-sizing: border-box;
      overflow: hidden;

      .po-ab {
        width: calc(100% - 40px);
        height: calc(100% - 68px);
        overflow: hidden;
      }
    }
  }

  .l_h24 {
    line-height: 24px;
  }

  .l_2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .err_tit {
    display: inline-block;
    margin-bottom: 12px;
    color: $iconColor;
  }
  .line{
    margin-top: 10px;
  }
  .unit{
    margin-bottom: 10px;
  }
</style>
 

你截的这些图根本看不出来问题所在哦！

如：触发下拉的事件的逻辑是怎样的，什么组件触发的下拉事件，都没有说清楚。

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632