vue用vue-concise-slider插件实现网站新闻公告上下滚动（支持移动端）【转】_显示由下向上滚动的新闻公告csdn

代码如下：

<template>
  <div>
    <div style="width:70%;margin:20px auto;height:40px">
      <!-- 配置slider组件 -->
      <slider ref="slider" :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
        <!-- 设置loading,可自定义 -->
        <!--<div slot="loading">loading...</div>-->
      </slider>
    </div>
  </div>
</template>
 
<script>
  import slider from 'vue-concise-slider'// import slider components
 
  export default {
    name: 'My',
    components: {slider},
    data () {
      return {
        HelloWorld_data: '',
        list: ['第一条消息','第二条消息','第三条消息','第四条消息'],
        //Image list
        pages:[],
        //Sliding configuration [obj]
        sliderinit: {
          pagination: true, // 底部小圆点是否隐藏（true显示，false隐藏）
          currentPage: 0, // 当前页码
          thresholdDistance:500, // 滑动判定距离
          thresholdTime:100, // 滑动判定时间
          autoplay:2000, // 自动滚动[ms]
          loop:true, // 是否循环滚动
          direction:'vertical', // 滚动方向
          infinite:1, // 无限滚动前后遍历数
          slidesToScroll:1, // 滚动行数
          timingFunction: 'ease',
          duration: 300
        }
      }
    },
    mounted () {
      // this.pages.length = this.list.length
      for (let i = 0;i < this.list.length;i ++) {
        this.pages.push({
          html: '<div>' + this.list[i] + '</div>',
          style: {
            'font-size': '18px',
            'color': 'black',
            'height': '30px',
            'margin': '10px',
            'width': '100%'
         }
        })
        // this.pages[i].html = '<div class="slider' + i+1 +'">' + this.list[i] + '</div>'
      }
      console.log(this.pages)
    },
    methods: {
      // Listener event
      slide (data) {
        // console.log(data)
      },
      onTap (data) {
        console.log(this.list[data.currentPage])
      },
      onInit (data) {
        // console.log(data)
      }
    }
  }
</script>
 
<style scoped>
 
</style>

具体可参考：https://segmentfault.com/a/1190000006581252 和https://warpcgd.github.io/vue-concise-slider/#/config?id=thresholdtime