Vue相关插件使用记录

1.列表轮播（类似新闻列表，中奖信息）：
名称

vue-seamless-scroll

cdn

https://cdn.jsdelivr.net/npm/vue-seamless-scroll@1.1.17/dist/vue-seamless-scroll.min.js

介绍

https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

样例：

import VueSeamlessScroll from 'vue-seamless-scroll'

//data中定义
classOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }

<div class="list_box" :style="{'height': listHeight + 'px'}">
        <!-- <scroll-list :listData="luckList" :activeCount="activeCount"></scroll-list> -->
        <vue-seamless-scroll :data="luckList" class="list_content" :class-option="classOption">
          <ul>
            <li class="list_content_item" v-for="(item, index) in luckList" :key="index">
              <div class="item_row">
                <div class="item_prefix">恭喜</div>
                <div class="city_name">{{item.areaName}}</div>
                <div class="shop_name">{{item.retailName}}</div>
                <div class="time">{{item.luckDate}}中奖</div>
              </div>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>

补充: 根据页面计算容器高度（body要设高，不然document.body.clientHeight会出现为0的情况）

// 计算显示的列个数。已占用的高度49.3+60+16+5vh=125.3vw + 5vh
      let width = document.body.clientWidth
      let height = document.body.clientHeight
      let itemHeight = width * 0.055
      let remainHeight = height - Math.ceil(height * 0.05 + width * 1.3)
      // console.log('总高度',height, '已占用高度', height - remainHeight, '剩余高度', remainHeight)
      this.activeCount = Math.floor(remainHeight / itemHeight)
      this.listHeight = remainHeight

2. 自定义滚动条：https://vuescrolljs.yvescoding.org/zh/
   如果有遮罩层出现，遮罩层设置z-index，否则滚动条会显示遮罩层之上（应该是插件里边设置了层级吧）

名称

vuescroll

介绍

https://vuescrolljs.yvescoding.org/zh/

样例

import vuescroll from 'vuescroll'

 //data中定义
 ops: {
        bar: {
          onlyShowBarOnScroll: false,
          background: '#a06832',
          size: '2px',
          specifyBorderRadius: '6px',
          keepShow: true
        }
      },

<!-- 规则 -->
    <div class="rule">
      <vuescroll :ops="ops">
        <p>1·活动时间: <span class="red_color">2019.12.25-2020.1.21</span></p>
      </vuescroll>
    </div>

3. vant：https://youzan.github.io/vant/#/zh-CN/swipe

--------------------------待补充