vue脚手架——vue-seamless-scroll + 弹窗(el-dialog) +click失效+获取后台数据后滚动失效+一次滚动完成的回调事件

需求：制作一个轮播列表，内含一个按钮，点击按钮弹出一个窗显示该行及更多的内容。
问题1：在过程中发现，点击click事件无效，查看文档后，发现官方文档也给出了一个解决方案，但是作为新人还是云里雾里鸭~以下是我对这一问题的解决以及实现需求的思路。
问题2：连接后端数据后发现打印出来的数据，并且格式也正确，但是滚动失效。

笔记：一次滚动完成的回调事件。

安装vue-seamless-scroll

npm install vue-seamless-scroll --save

引入方式
① 全局引入方式，在main.js中引入

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

② 局部引入方式

<script>
  import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }
</script>

使用方式：在template中使用 vue-seamless-scroll 标签

<template>
  <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
        <ul class="item">
            <li v-for="(item,index) in listData" :key="index">
                
                //在此轮播中比较推荐使用 v-text 来渲染数据
                <div class="list-first">
                	<el-button type="danger"  v-text="item.incident"></el-button>
                </div>
                <div class="address" v-text="item.address"></div>
            </li>
        </ul>
      </vue-seamless-scroll>
</template>

问题1：

在上面的代码中，你会发现加上一个点击事件用来触发弹出框的话，在第二轮循环的时候弹不出来，直到第一轮完全轮播完才可以点击动，此时在轮播的父元素绑定一个点击事件就可以解决这个尴尬问题啦~
(额外的说说 在添加了点击事件之后，点击那个列那里的任一地方都会触发click事件，那么要实现只点击按钮才弹框的需求，加个判断条件就好啦~)

<template>
<div>
 //轮播列表
 <div @click="clickup($event)">
  <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
        <ul class="item">
            <li v-for="(item,index) in listData" :key="index">
                
                //在此轮播中比较推荐使用 v-text 来渲染数据
                <div class="list-first">
                	<el-button type="danger"  v-text="item.incident"></el-button>
                </div>
                <div class="date" v-text="item.date"></div>
            </li>
        </ul>
      </vue-seamless-scroll>
     </div>
     //弹出框
     <el-dialog class="customWidth"
     title=""
    :visible.sync="incidentDialogVisible"
     width="35%"
    :modal-append-to-body='false'>
    // 弹出框内容 
    <el-form :model="informationForm"
               label-width="100px">
        // 触发类型
        <el-form-item  label="触发类型："
                      prop="incident">
          <el-input v-model="informationForm.incident"></el-input>
        </el-form-item>
       //报警时间
        <el-form-item label="报警时间："
                      prop="date">
          <el-input v-model="informationForm.date"></el-input>
        </el-form-item>
    <span slot="footer" class="dialog-footer">
      <el-button class="dialogBtn" type="danger"  @click="incidentDialogVisible = false">关 闭</el-button>
    </span>
</el-dialog>
   </div>
</template>
<script>
// 备注：若滚动信息为API后台请求数据，需要在vue  生命周期create 以及mounted中同时通过this.$nextTick请求,
// 目的是保证在dom加载前获取数据再渲染。
export default {
  data () {
    return {
      // 弹出框的信息
      informationForm: {
        address: '',
        incident: '',
        equipmentType: '',
        date: ''
      },
      // 报警类型个数
      incidents: {
        fire: 15,
        malfunction: 10
      },
      // 报警信息
      listData: [{
        date: '2017-12-16',
        incident: '报警'
      }, {
        date: '2017-12-16',
        incident: '故障'
      }],
      // 是否显示报警详情弹出框
      incidentDialogVisible: false
    }
  },
  computed: {
    classOption () {
      return {
        // 数值越大速度滚动越快
        step: 0.8,
        // 开始无缝滚动的数据量
        limitMoveNum: 8,
        // 是否开启鼠标悬停
        hoverStop: true,
        // 0向下 1向上 2向左 3向右
        direction: 1,
        // 开启数据实时监控刷新dom
        openWatch: true,
        // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleHeight: 0,
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        singleWidth: 0,
        // 单步运动停止的时间(默认值1000ms)
        waitTime: 1000

      }
    }
  },
  methods: {
    clickup(e) {
      // 使仅点击按钮触发点击事件
      if (e.target.classList.contains('el-button--danger')) {
        this.incidentDialogVisible = true
      }
    }
  }
}
</script>

接下来是实现：点击按钮，把对应的data数据赋值给弹出框，我是这样做的：
① 在data中创建一个专门放弹出框信息的对象

 informationForm: {
        address: '',
        incident: '',
        equipmentType: '',
        date: ''
      },

② 在点击按钮中添加要拿到的值

 <el-button type="danger"  v-if="item.incident == '报警'" 
                           class="fire-btn" 
                           v-text="item.incident" 
                           :incident="item.incident" 
                           :date="item.date"</el-button>

③ 在点击事件中把数据赋值到informationForm中

  methods: {
    clickup(e) {
      // 使仅点击按钮触发点击事件
      if (e.target.classList.contains('el-button--danger')) {
        this.incidentDialogVisible = true
      }
      console.log(e.target)
      // 弹框获取内容
      this.informationForm.incident = e.target.getAttribute('incident')
      this.informationForm.date = e.target.getAttribute('date')
      console.log(this.informationForm.incident)
    }
  }

问题2

在连接数据之后，发现了我的滚动失效了，但是打印出来的格式等都是一样的，于是我开始排查原因，在连接自己数据的时候transform是会一直变化的，但是连接数据之后，那里就不动了。于是我想到可能是因为拿数据比较慢，然后我们通过父传子的形式，来获取形式，但是很遗憾>.< 还是不会滚动。然后我男朋友不知道怎么想到是push的问题。我一开始是直接拿到值 然后直接丢到data里面的，改正后是先设置出一个空数组，然后将循环出来的数据放在那个空数组里，再把那个数组赋值到data里面，这样就解决问题啦~ 代码如下：

 async getRBDData () {
      let data = {
        pageNumber: 1,
        pageSize: 18
      }
      let userId = localStorage.getItem('userId')
      let config = {
        headers: { 'userId': userId }
      }
      const { data: res } = await this.$http.get('/地址', { params: data }, config)
      if (res.code !== 20000) {
        return this.$message.error('获取数据失败')
      } else {
        let _this = this
        //设置了一个空数组，用于存放循环出来的数据
        let data = []
          res.data.list.forEach(function (elem, index) {
          let formatData = {
            button: elem.strValue,
            time: moment(elem.gmtCreate).format('YYYY-MM-DD hh:mm:ss'),
            address: {
              province: elem.provinceCode.toString(),
              city: elem.cityCode.toString(),
              area: elem.countyCode.toString(),
            },
            place: elem.place,
            equipmentType: elem.deviceId
          }
          //把数据push到空数组中
          data.push(formatData)
        }
        //把数组直接赋值到data中
        _this.rightBoxDown.listData = data
      }
    },

一次滚动完成的回调事件
此事件官方文档也有给出，但是只有一句话呀~
这里给个详细用法哦(●’◡’●)

在滚动组件的template中，调用事件 @ScrollEnd=“scrollEnd”

 <vue-seamless-scroll
        :data="listData"
        :class-option="classOption"
        @ScrollEnd="scrollEnd"
        class="seamless-warp"
      >
 </vue-seamless-scroll>

在methods中使用

scrollEnd () {
      // this.listData.length是拿取一次后台数据的数量
      if (this.listData.length) {
        //当拿取的数据轮播完后，再次调用获取后台数据的方法
        this.getRBDData()
      }
    }

总结：
① 在使用vue-seamless-scroll的时候，直接添加click事件的时候，会在第二轮失效，此时需要在父元素添加一个点击事件，此时又要注意，是否有点击某个元素的时候才触发，有的话，加个判断条件就好啦。
②点击按钮，获取对应数据。要先在按钮中绑定需要的元素就好啦~
③连接后端数据,不要直接push进去.

最后的最后放下效果吧：

如有不对的或者更加简便的方法，欢迎告知哦 有帮助到你的话给个赞吧~