ido-scroll v0.1.7

ido-scroll

一个基于Vue 具备上拉刷新，下拉加载更多，滚到到顶部等功能。并且提供各种滚动事件方便使用者拓展得滚动容器。

集成

npm i ido-scroll -S

使用

ido-scroll依赖vue-awesome-swiper@3.1.3，安装本插件的同时也会安装vue-awesome-swiper。

注意：使用ido-scroll最外层要包含一个固定高度得容器

// 导入组件
import IdoScroll from 'ido-scroll'
// 注册
Vue.use(IdoScroll)

使用 Vue.use() 全局注册后，即可在任意页面直接使用了，而不需另外引入。

如下：container必须为一个固定高度的容器，这个高度可以任意指定

<style>
  html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .container{
    width:100%;
    height:100%;
  }
</style>
<div class="container">
  <ido-scroll>
    ...
  </ido-scroll>
</div>

使用示例

对应example/basic组件

  <div class="box">
    <ido-scroll :data="mData">
      <ul>
        <li class="item" v-for="(item, index) in mData" :key="index">
          {{ item }}
        </li>
      </ul>
      <!-- 其它更多内容... --> 
    </ido-scroll>
  </div>
</template>

其中传递参数data，可以是包裹内容的数据，当data数据有变化，ido-scroll会调用update()方法来重新计算高度，当然你也可以自己手动调用update()方法来更新。

下拉刷新和上拉加载示例

对应example/pullToRefresh组件

<div class="box">
    <ido-scroll 
       :data="mData" 
       pullDown 
       pullUp 
       @onRefresh="pullToRefresh" 
       @onLoadmore="pullToLoadmore"
       @pullDownTransitionEnd="pullDownTransitionEnd">
        <ul>
            <li class="item" v-for="(item, index) in mData" :key="index">
                {{ item }}
            </li>
        </ul>
         <!-- 其它更多内容... --> 
    </ido-scroll>
</div>
<script>
    ...
    data() {
        return {
            mData: ['ido-web', 'ido-ui-css', 'iso-vue', 'ido-scroll', 'ido-web', 'ido-ui-css', 'iso-vue', 'ido-scroll']
        }
 	},
	methods: {
       // 下拉刷新回调，需要手动调用end()方法来结束
       pullToRefresh(end) {
          setTimeout(() => {
            end()
          }, 2000)
       },
       // 上拉加载更多回调，需要手动调用end()方法来结束
       pullToLoadmore(end) {
          this.getData()
            .then(end)
            .catch(err => {
              console.log(err)
              end()
            })
        }
        
        // 获取数据
        getData() {
          return new Promise(resolve => {
            setTimeout(() => {
              let newData = ['新来的数据', '新来的数据', '新来的数据', '新来的数据', '新来的数据','新来的数据']
              this.mData = this.mData.concat(newData)
              resolve()
            }, 2000)
          })
        },
 	 }
    ...
</script>

• 传递pullDown参数来开启下拉刷新，通过监听onRefresh事件处理下拉刷新的逻辑，onRefresh有一个end参数，处理完刷新逻辑，需要手动调用end()方法来结束刷新。
• 传递pullUp参数来开启上拉加载，通过监听onLoadmore事件处理上拉加载的逻辑，onReonLoadmoreresh有一个end参数，处理完上拉加载逻辑，需要手动调用end()方法来结束上拉加载。
• pullDownTransitionEnd参数是监听下拉刷新完成后，位移动画彻底结束的回调，在这里可以处理自己的一些业务逻辑，最典型的就是，当下拉刷新的时候，我们需要隐藏头部的搜索款，让刷新动画彻底完成，我们要显示头部的搜索框。

参数、事件、以及API介绍

参数介绍

事件介绍

api介绍

项目中使用实例

变更记录

0.1.5

• 【Initial】初始版本

0.1.6

• add 对上拉和下载加载增加插槽,方便使用者个性化定制加载动画。
• Bug Fix 修复update无效得问题

0.1.7

• update 更新原有的刷新动画