readme
readme
cube-ui 是一个基于 Vue.js 实现的精致移动端组件库。
它响应迅速、动画流畅，追求极致的交互体验。
总体分为基础、弹层、滚动三大组件模块。可以说基本涵盖了我们移动端所有的组件需求。
这里我们就用 cube-ui 来做一个简单的赛事类 APP，里面包含了几个很主要的组件。让我们先从初始化项目开始吧。
初始化cube-ui项目
cube-ui 为我们提供了脚手架，可以方便的迅速初始化一个 cube-ui 项目，里面有基本配置和基础代码。然后你就可以开始迅速的使用它了。
$ vue init cube-ui/cube-template projectname现在，我们就有了最基本的项目结构，可参考stage-1分支。
slide
轮播可以让用户通过左右滑动，来很方便的切换 Tab 页。
这样通过滑动来切换赛事状态可以说是很方便快捷了包括你点击 tab 也可以有同样的效果。cube-ui 的 Slide 组件为我们提供了流畅的轮播和 swipe 功能，让我们通过它来为我们的应用添加 Slide 吧。
<cube-slide
:data="tabList"
:initialIndex="currentPage"
:loop="false" //开启循环播放
:autoPlay="false" //关闭自动播放
:threshold="0.1" //切换页面的滑动阈值
@change="slideChange">
<cube-slide-item v-for="(item, index) in tabList" :key="index">
<div class="match-list-wrapper">
<match-list :type="type" :status="index"></match-list>
</div>
</cube-slide-item>
</cube-slide>这里我们采用了自定义内容。Slide 组件为我们提供了默认插槽和 cube-slide-item 来自定义每个轮播页的结构。你还可以为它做一些更详细的设置。详情请参考官方文档。
滚动列表
滚动列表为用户提供了更流畅的浏览体验。
它主要包括下拉刷新和上拉加载两个功能。
我们这是一个赛事直播的应用，那么比赛的变化可是瞬息万变的。用户就需要时不时的刷新列表来获取最新的数据。以及上拉加载来获取更多的比赛。我们借助 cube-ui 的 Scroll 组件来实现这个效果是十分简单快捷的，此部分可参考stage-3分支。
下拉刷新
用户将列表下拉到设定位置时，会触发 Scroll 组件的 pulling-down 事件，而在这个事件的处理函数中，我们可以刷新数据。
onPullingDown () {
setTimeout(() => { //这里用setTimeout模拟数据请求
if (Math.random() > 0) {
let match = []
for (let index = 5; index > 0; index--) {
match.push(this.matchList[index])
}
this.matchList.unshift(...match)
} else {
this.$refs.scroll.forceUpdate() //在无新数据时，注意停止updata
}
}, 1000)
}这里需要注意的是，如果请求结果是没有新数据，则必须使用 this.$refs.scroll.forceUpdate() 结束此次下拉刷新。这样，Scroll 组件才会开始监听下一次下拉刷新操作。
我们还可以为这个下拉的动作做一些更详细的配置，如下拉距离阈值，回弹停留位置等。
pullDownRefresh: {
threshold: 90, //下拉距离阈值
stop: 50, //回弹停留位置
txt: '刷新成功' //刷新成功文案
}另外，如果你不喜欢内置的下拉刷新动画，还可以用作用域插槽做自定义动画。详情见官方文档。
上拉加载
用户将列表上拉到某一指定位置时，会触发 Scroll 组件的 pulling-up 事件。同样，在这个事件的处理函数中，我们进行数据的刷新。
onPullingDown () {
setTimeout(() => {
if (Math.random() > 0) {
let match = []
for (let index = 5; index > 0; index--) {
match.push(this.matchList[index])
}
this.matchList.unshift(...match)
} else {
this.$refs.scroll.forceUpdate()
}
}, 1000)
}与下拉刷新相同，你可以为上拉加载的动作做一些更详细的设置，以及通过作用域插槽做自定义动画，详情见官方文档。
是不是做起来简单效果还很赞呢！除了上面介绍的这些，Scroll 组件里面还有其他一些详细的配置。比如我们可以通过 options 来修改滚动条的样式等等。详情还请去官方文档查阅哦~
这里还需提醒大家注意一下，在使用Scroll组件的时候，为保证正常滚动，内容元素 .cube-scroll-content 在滚动方向上的长度必须大于容器元素 .cube-scroll-wrapper 。具体滚动原理请去往官方文档里查看。
createAPI方法
createAPI 的作用是把我们之前声明式的组件使用方式改变成 API 式的调用。我们知道 Vue 推荐的就是声明式的组件使用方式，比如在使用一个组件 xxx，我们简单在使用的地方声明它就好了。
<tempalte>
<xxx/>
tempalte>对于一般组件，这样使用并没有问题，但对于全屏类的弹窗组件，如果在一个层级嵌套很深的子组件中使用，仍然通过声明式的方式，很可能它的样式会受到父元素某些 CSS 的影响导致渲染不符合预期。这类组件最好的使用方式就是挂载到 body 下，但是我们如果是声明式地把这些组件挂载到最外层，对它们的控制也非常不灵活。其实最理想的方式是动态把这类组件挂载到 body 下，createAPI 就是干这个事情的。
以我们的应用为例，我们可以使用弹出层为用户做一些提示信息
cube-ui 提供了所有弹窗类组件的基类组件 Popup，如果是新增一个弹窗类组件，推荐基于 Popup 做二次开发。我们这里就是基于 Proup 封装了名为 subscribe-dialog 的弹窗组件。
首先我们通过 createAPI 创建一个this.$createSubscribeDialog API，把 SubscribeDialog 变成一个 API 式调用的组件：
createAPI(Vue, SubscribeDialog, [], true)接着我们就可以在组件内部通过 this.$createSubscribeDialog() 的方式调用它
this.subscribeDialog = this.$createSubscribeDialog().show()当执行 .show 的时候，cube-ui 内部会把 SubscribeDialog 组件动态挂载到 body 下。
你还可以为你的弹出层做 mask 之类更详细的配置,这一部分你可以参考项目中的stage-4分支。
cube-ui的弹出层组件部分，还包含了 Picker、TimePicker、Dialog 等其他弹出层，详情见官方文档。
Picker
Picker作为我们应用中必不可少的一部分，主要用于用户选择比赛类型。
用户可以通过屏幕下边上滑出的 Picker，来选择想看的比赛类型。点击确认后，如果确认值有变，则更新比赛列表。并且点击取消、确定以及 Picker 之外的地方时，都让 Picker 消失。
mounted () {
this.picker = this.$createPicker({
title: '赛事',
data: [this.pickerList],
onSelect: () => { //点击确定时
this.toFlip = !this.toFlip
},
onCancel: () => { //点击取消时
this.toFlip = !this.toFlip
},
onValueChange: (selectedVal) => { //确认的值有改变时
this.type = selectedVal[0]
}
})
}我们创建了 Picker，并为它的 data 字段传入表示比赛类型的数组。然后你可以在它的各种事件中做你想做的事情。还可以为这个 Picker 做一些其他更详细的配置，详情见官方文档
总结
到这里，我们的应用可以说是基本完成了。但其实，也还只是用了 cube-ui 几个比较主要的组件。cube-ui 还有很多很棒的组件，如表单、开关、loading等，如果你有兴趣的话，也可以继续丰富我们这个赛事应用。当然，你也已经完全可以借助 cube-ui ，开始一个自己的项目啦~