滾動條vue-seamless-scroll的使用

npm安裝地址： https://www.npmjs.com/package/vue-seamless-scroll

npm 執行：npm install vue-seamless-scroll --save

main.js文件里面引入使用：

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

使用參考地址1： https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

使用參考地址2：https://chenxuan0000.github.io/vue-seamless-scroll/#/routerOne

1、自己寫了一個Table樣式，head固定，數據豎着滾動

        <div class="project-icon-table">
          <div class="table-box">
            <table class="table-head" style="table-layout:fixed; word-break:break-all;">
              <tr>
                <td style="width:140px">
                  <div class="table-cell">
                    <span>位置</span>
                  </div>
                </td>
                <td style="width:110px">
                  <div class="table-cell">
                    <span>時間</span>
                  </div>
                </td>
                <td style="width:95px">
                  <div class="table-cell">
                    <span>參數</span>
                  </div>
                </td>
                <td style="width:75px">
                  <div class="table-cell">
                    <span>值</span>
                  </div>
                </td>
              </tr>
            </table>
            <vue-seamless-scroll style="overflow: hidden;height: 380px;width: 100%;" :class-option="{step:0.3}" :data="gdjc_list">
              <table class="table-body" style="table-layout:fixed; word-break:break-all;">
                <div v-for="(item,index) in gdjc_list" :class="index%2==1 ?' deep_color':''" :key="index" >
                  <tr>
                    <td style="width:140px">
                      <div class="table-cell">
                        <span>{{item.Name}}</span>
                      </div>
                    </td>
                    <td style="width:110px">
                      <div class="table-cell">
                        <span>{{item.Time}}</span>
                      </div>
                    </td>
                    <td style="width:100px">
                      <div class="table-cell">
                        <span>{{item.Type}}</span>
                      </div>
                    </td>
                    <td style="width:70px">
                      <div class="table-cell">
                        <span>{{clipString(item.Param,5)}}</span>
                      </div>
                    </td>
                  </tr>
                </div>
              </table>
            </vue-seamless-scroll>
          </div>
        </div>

     .project-icon-table {
        height: 420px;
        width: 100%;
        .table-box {
          margin: 5px 5px 5px 10px;
          .table-head {
            background-color: #172747;
            border: none;
            tr {
              height: 40px;
              width: 100%;
              td {
                vertical-align: middle;
                .table-cell {
                  text-align: center;
                  padding-left: 5px;
                  padding-right: 5px;
                  span {
                    color: #b7e4ff;
                  }
                }
              }
            }
          }
          .table-body {
            tr {
              height: 40px;
              width: 100%;
              td {
                vertical-align: middle;
                .table-cell {
                  text-align: center;
                  padding-left: 5px;
                  padding-right: 5px;
                  span {
                    color: #fff;
                    // font-size: 18px;
                  }
                }
              }
            }
          }
          .deep_color {
            background-color: #172747;
          }
        }
      }

2.圖片滾動樣式，橫着向右滾動

        <div class="project-icon-list">
          <vue-seamless-scroll :data="gdjc_img_list" :class-option="{step: 1,limitMoveNum: 2,direction: 3,singleWidth: 425}" class="seamless-warp2" >
            <viewer :images="gdjc_img_list">
              <ul class="item">
                <li v-for="(item,index) in gdjc_img_list" :key="index">
                  <img width="425" height="190" :src="item.attrUrl" />
                </li>
              </ul>
            </viewer>
          </vue-seamless-scroll>
        </div>

    .project-icon-list {
        width: 425px;
        height: 192px;
        margin-left: 12px;
        border: 1px solid #2a72c0;
        align-self: center;
        ul.item {
          width: 100%;
          height: 100%;
          overflow-y: scroll;
          overflow-x: scroll;
          display: flex;
          li {
            text-align: center;
            margin-top: 1px;
            .image {
              width: 425px;
              height: 188px;
            }
          }
        }
      }

 ps:網上還有另外一種Carousel輪播組件

地址：https://www.jianshu.com/p/9952e9644610

源碼地址：https://github.com/AntJavascript/widgetUI/tree/master/Carousel