基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子

直接上源码:

组件:scroll.vue,需要先npm install better-scroll







应用方法:

引入并注册组件:

  import Scroll from 'base/scroll/scroll'
  export default {
    components: {
      Scroll
    }
  }

template结构以及style:

基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子_第1张图片


效果:图中轮播图+列表为滚动区域(recommend-content),即需要滚动的内容;对应的class:slider为轮播图,recommend-list为列表。由于轮播图数据以及list数据为动态获取,实际使用请填充你的数据,以上只给出关键结构。

基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子_第2张图片


已实现滚动:

基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子_第3张图片



你可能感兴趣的:(前端解决方案,Vue)