slidelist v0.0.5

感谢使用该插件

• 第一步：npm install slidelist
• 第二步：在main.js中引入并使用 import slideList from 'slidelist' Vue.use(slideList)
• 第三步：在需要滑动的窗体中加入如下属性

<div @scroll="handleScroll($event)" style="height: 102%;overflow-y: auto;">

• 第四步：在该窗体中使用插件，具体如下

<slide-list :slideList="slideList" mainWidth="80rem" mainHeight="100%" itemWidth="24%">
  <template v-slot:default="slotProps">
    <div>
      <h1>{slotProps.item.title}</h1>
      <p>{slotProps.item.content}</p>
    </div>
  </template>
</slide-list>

<script>
export default {
  data () {
    return {
      slideList:[
        {起始数据}
      ],
      newSlideList:[
        {新增数据}
      ]
    }
  },
  methods: {
    handleScroll (e) {
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      let clientHeight = e.target.clientHeight;
      if(scrollTop + clientHeight >= scrollHeight){
        e.target.scrollTop = scrollHeight * 1.5;
        this.slideList = this.slideList.concat(this.newSlideList);
      }
    }
  }
}
</script>

• 可传参数：

  slideList(数据列表) mainWidth(列表宽度) mainHeight(列表高度) itemWidth(列表每个单向宽度) 在slot中以 slotProps.item.属性 的方式自定义参数