vue无缝轮播滚动

效果图:
vue无缝轮播滚动

1.引入vue-baidu-map,对应的命令是

npm install vue-seamless-scroll --save

2.然后在main.js文件里面引入使用:

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

3.页面应用

          <vue-seamless-scroll
            :data="scrollingData"
            :class-option="optionSetting"
            class="seamless-warp" >
            <ul class="item">
              <li v-for="item in scrollingData" :key="item"> </li>                      
            </ul>
          </vue-seamless-scroll>

data:

scrollingData: [],

computed配置属性:

 computed: {
    optionSetting() {
      return {
        step: 0.5,
        limitMoveNum: 1,
        hoverStop: true,
        direction: 1,
        openWatch: false,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000,
      };
    },
  },
上一篇:详解Vue中的computed和watch


下一篇:Vuex的五个核心属性及辅助函数