随身笔记
随身笔记

vue滚动vue-seamless-scroll

https://chenxuan0000.github.io/vue-seamless-scroll/guide/

本地文档:地址1

 

import vueSeamlessScroll from 'vue-seamless-scroll/src';

export default {
  name: "index",
  components: {
    vueSeamlessScroll
  },
  data(){
     return:{
     listData:[
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },{
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
      ]
     }
  }
}

                <div class="scroll-title" style="display: flex">
                  <div>排名</div>
                  <div>科室</div>
                  <div>人次</div>
                  <div>占比(%)</div>
                </div>
                <vue-seamless-scroll :data="listData" class="seamless-scrollwarp">
                  <ul class="item">
                    <li v-for="(item, index) in listData" :key="index">
                      <span class="title" v-text="item.title"></span>
                      <span class="date" v-text="item.date"></span>
                      <span class="date" v-text="item.date"></span>
                      <span class="date" v-text="item.date"></span>
                    </li>
                  </ul>
                </vue-seamless-scroll>


.scroll-title{
    display: flex;
    &>div{
      flex: 1;
      text-align: center;
    }
  }

  .seamless-scrollwarp {
    height: 230px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,
      a {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        span{
          flex: 1;
          text-align: center;
        }
      }
    }
  }


 

随身笔记

vue滚动vue-seamless-scroll
https://chenxuan0000.github.io/vue-seamless-scroll/guide/ 本地文档:地址1   import vueSeamlessScroll from 'vue-seamless-scroll/src'; export default { name: …
扫描二维码继续阅读
2022-11-16