Scroll

滚动组件 / Scroll滚动组件

来源

Content组件也具有滚动属性, 但是Content组件的定位是页面基础布局的中间层, 也就是内容层, 这个内容层也支持jsScroll, 但是不支持滚动事件, 移除也是为了考虑性能的问题. 当然也有特殊情况, 如果内容层希望能有一个支持jsScroll的子组件这里就需要Scroll组件了.

比如:

• 订单App, 左侧的菜单类别, 右侧类别详情(菜单详情).
• 滑动可切换的tab组件, 能更具我外接触发滚动祖选择等.
• 横向的跑马灯, 根据指令切换到某个位置.
• 对Content组件的拓展, 是的浏览内容支持jsScroll

传参及事件

Scroll组件是对 better-scroll 组件的封装, 组件书写完毕也是初始化完毕的时候, props就是传入的参数, 如果需要监听事件, 则通过@绑定即可, 例如:

<Scroll @scroll="scrollHandler" ref="scroll">内容</Scroll>

虽然事件的命名不符合Vimo既有规范, 但这部分是封装了better-scroll, 因此不改变原基础为好, better-scroll的文档参看下方链接.

通过ref获取组件实例进行操作, 因此使用逻辑完全一致. 其余详情请参考下方链接.

获取jsScroll的实例

<Scroll ref="scroll">内容</Scroll>

computed: {
   scrollComponent () {
       return this.$refs.scroll.jsScrollInstance
   }
}

关于销毁

组件关闭自动销毁, 因此不存在持续占用内存的问题

如何引入

// 引入
import { Scroll } from 'vimo'
// 安装
Vue.component(Scroll.name, Scroll)
// 或者
export default{
  components: {
    Scroll
 }
}

滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于better-scroll进行封装的组件。

示例

• 基本使用

通过设置 data 属性为一个数组，即可生成能够在容器内优雅滚动的列表。

 <div class="scroll-wrapper">
  <vm-scroll>
    <vm-list>
         <vm-item v-for="item in datas">{{item.text}}</vm-item>
       </vm-list>
  </vm-scroll>
</div>

• 配置 better-scroll 选项

  通过 options 属性可以配置 better-scroll 的选项，包括滚动条、下拉刷新、上拉加载等，具体可查看 better-scroll 的官方文档，这里仅对几个常用的配置项进行介绍说明。

  1）滚动条

  默认无滚动条，还可设为淡入淡出滚动条或一直显示滚动条。

  <vm-scroll :options="options">
    <vm-list>
      <vm-item v-for="item in datas">{{item.text}}</vm-item>
    </vm-list>
  </vm-scroll>

  export default {
    data() {
      return {
        datas: [1, 2, 3, 4, 5],
        options: {
          scrollbar: {
            fade: false
          }
        }
      }
    }
  }

  2）下拉刷新

  默认无下拉刷新功能，可通过配置项pullDownRefresh开启pulling-down事件派发和下拉动画，你可以监听pulling-down事件更新数据。

  ```html
  <vm-scroll
  ref="scroll"
  :options="options"