Fly ·

移动端组件库，基于Vue2.0开发

运行

$ npm run start

安装

使用npm

$ npm install fly --save

或使用 <script> 全局引用

<script type="text/javascript" src="fly.js"></script>

引入 Fly

一般在 webpack 入口页面 main.js 中如下配置：

import Vue from 'vue'
import Fly from 'fly'

Vue.use(Fly)

按需引用

import Message from 'fly/dist/message'
import Loading from 'fly/dist/loading'

import LoadMore from 'fly/dist/loadMore'

Vue.component(LoadMore.name, LoadMore)

组件使用说明

Message

通过直接调用以下方法来使用组件：

this.$message('message')

按需引用使用方式：

import Message from 'fly/dist/message'
Message('message')

Loading

通过直接调用以下方法来使用组件：

• 开启loading：this.$loading()
• 关闭loading：this.$loading.close()

按需引用使用方式：

import Loading from 'fly/dist/loading'
Loading()  // 开启loading
Loading.close()  // 关闭loading

LoadMore(上拉加载)

例子：

<fly-loadmore :bottomLoadAll="bottomLoadAll" :bottom-fetch-method="handleLoadMore" ref="loadmore">
  <ul>
    <li v-for="item in list">{{ item }}></li>
  </ul>
</fly-loadmore>

按住列表，上拉一定距离后释放，被指定为 bottom-fetch-method 的方法就会执行。当数据获取完毕时将绑定到 bottomLoadAll 属性的变量赋值为 true 解绑 loadmore 事件。

handleLoadMore() {
  ... //加载更多
  this.$refs.loadmore.onBottomLoaded()
}

注意在这个方法的最后需要手动调用 loadmore 的 onBottomLoaded 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。

API ：

| 参数 | 说明 | 类型 | 默认值 | | ------------- | ------------- | -------- | ------ | | distanceIndex | 手指移动与组件移动距离的比值 | Number| 2 | | bottomPullText | 上拉时加载提示区域的文字 | String | 上拉刷新 | | bottomDropText | 释放时加载提示区域的文字 | String | 释放更新 | | bottomLoadingText | loading时加载提示区域的文字 | String | 加载中... | | bottomDistance | 触发 bottomFetchMethod 的上拉距离像素值 | Number | 70 | | bottomLoadAll | 若为真，则 bottomFetchMethod 不会被再次触发，事件解绑 | Boolean | false | | bottomFetchMethod | 上拉刷新执行的方法 | Function | |

后续

组件陆续更新中。。。👨‍💻👩‍💻

License

MIT