0.1.0 • Published 5 years ago

@mu-ui/mu-scroll v0.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
5 years ago

mu-scroll 局部滚动

安装方式

yarn add @mu-ui/mu-scroll

使用指南

import Scroll from '@mu-ui/mu-scroll'

Vue.component('Scroll', Scroll)

<Scroll
  :pullRefresh="true"
  :infiniteLoading="false"
  :scrollBar="true"
  :scrollBarOffset="0"
  @pull-refresh="load"
  @pull-state="state"
  @infinite-loading="load2">
  <p v-for="n in count" :key="n">我是第{{ n }}个段落</p>
</Scroll>

...
methods: {
  load($result) {
    setTimeout(() => {
      this.count += 20
      $result.finish()
    }, 3000)
  },
  load2($result) {
    setTimeout(() => {
      this.count += 20
      $result.loaded()
    }, 3000)
  },
  state(state) {
    console.log(state)
  }
}

mu-scroll Props

参数说明类型默认值
pullRefresh是否可下拉刷新Booleanfalse
infiniteLoading是否可滚动加载Booleanfalse
scrollBar是否要滚动条Booleanfalse
scrollBarOffset滚动条偏移量Number0
scrollBarColor滚动条颜色String#aaa
scrollBarBgColor滚动条背景颜色Stringtransparent
pullStep下拉时缓动比例Number4
bounceTime过渡时间Number800

mu-scroll Slots

名称说明
pulldown自定义下拉展示内容
infinite自定义滚动加载展示内容

mu-scroll Events

名称说明
pull-refresh触发下拉加载
pull-state下拉时,各阶段反馈
infinite-loading触发滚动加载