vue用vue-concise-slider插件实现网站新闻公告上下滚动(支持移动端)【转】

代码如下:

隐藏滚动点的方法:在自定义scss文件中,添加如下样式

.swiper-container-vertical .slider-pagination-bullets {
  display: none;
}
<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: {
          currentPage: 0,
          thresholdDistance:500,
          thresholdTime:100,
          autoplay:2000,
          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 style="font-size: 18px;color: black;height: 30px;margin: 10px 0;width: 100%;">' + this.list[i] + '</div>'
        })
        // 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

阅读更多
上一篇css如何让一个宽高都不固定的div中的元素水平、垂直都居中
下一篇桌面图标异常的解决办法【转】
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭