vue-seamless-scroll使用中遇到关于click的问题

红太狼 2022-09-07 15:54 303阅读 0赞

使用vue-seamless-scroll实现数据无缝连续滚动

[https://blog.csdn.net/weixin\_43254676/article/details/94025887][https_blog.csdn.net_weixin_43254676_article_details_94025887]

原理  
基本原理是把要滚动的部分复制一份，滚动这两部分相同的内容，进而实现无缝连续滚动

遇到的问题  
当ul1中的数据未滚动完时,ul2 部分的click事件不起作用，无法实现功能

（此时可见区域内一部分数据为ul1，一部分数据为ul2）

简单分析  
第二部分无法操作和js的运行机制有关，需要重新绑定事件，具体原理也是一知半解，但是大致感觉问题是由于重复渲染，相同的部分绑定的事件不能同时运行，需要换个思路。当时同学提到了 js事件委托，需要好好了解一下。  
事件委托、  
事件委托  
阮一峰老师的js运行机制了解一下  
事件委托依靠的就是事件冒泡和事件捕获的机制

事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。  
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

所谓的事件委托就是通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。

解决问题  
1.给外层div加点击事件，通过event.target获取到点击的dom元素

获取到event 和 event.target如下

获取到了button之后，因为接下来的操作还需要用到ID和name，所以要给button绑定属性

id和name是button自带的属性，vue中自定义属性时还需要添加前缀 data- 获取时要加 dataset

控制台打印数据如下

现在获取到了所有想要的数据 和 要响应的事件，接下来执行事件即可。

代码如下：

<div class="m\_tableContent m\_gasMonitoring" @click="handleClick($event)">  
    <div class="m\_tableTitle">  
      <ul>  
        <li>编号</li>  
        <li>员工姓名</li>  
        <li>一氧化碳(ppm)</li>  
        <li>甲烷(%)</li>  
        <li>氧气(%)</li>  
        <li>温度(℃)</li>  
        <li>湿度(%)</li>  
        <li style="width: 30%">地点</li>  
        <li>操作</li>  
      </ul>  
    </div>  
    <vue-seamless-scroll :data="listData" :class-option="classOption" class="seamless-warp">  
      <ul v-loading="loading" class="item seamless-table">  
        <li v-for="(item,index) in listData" :key="index" class="seamless-row">  
          <p class="m\_rowItem ">\{ \{ item.sequenceId \}\}</p>  
          <p class="m\_rowItem">\{ \{ item.staffName \}\}</p>  
          // 部分省略  
           <p class="m\_rowItem">  
            <button :id="item.staffId" :name="item.staffName" :data-dept="item.deptName" type="danger" class="el-button el-button--danger el-button--mini is-plain" plain size="mini">呼叫</button>  
          </p>  
        </li>  
      </ul>  
    </vue-seamless-scroll>  
      </div>  
</template>  
<script>  
export default \{  
name: 'GasMonitorTable',  
  methods: \{  
    handleClick(event) \{  
      console.log(event)  
      console.log(event.target)  
      this.staffInfo.staffId = event.target.id  
      this.staffInfo.staffName = event.target.name  
      this.staffInfo.deptName = event.target.dataset.dept  
      this.handlePhoneStaff()  
    \}  
\}  
\}  
</script>  
  
原文链接：https://blog.csdn.net/weixin\_43254676/article/details/94025887

[https_blog.csdn.net_weixin_43254676_article_details_94025887]: https://blog.csdn.net/weixin_43254676/article/details/94025887