通过使用基于Vue的Onsen UI Tab切换提高用户体验

发表于   |   分类于   |  

原文地址：https://medium.com/the-web-tub/improve-ux-with-swiping-tab-bar-using-onsen-ui-for-vue-4c7d0e5171f0

Tab Bar滑动切换

现如今Cordova应用和PWA应用在移动设备上的应用是非常流行的。提供原生页面的外观和感觉是提高用户体验的关键，但是这往往不是一件容易的事情。值得肯定的是，创建生成一个有样式的复选框和单选按钮根本就不是问题而是一个实实在在的功能，我们追求的应用质量提升是基于用户交互的。

一个可滑动切换的tab bar将应用的内容分割成不同的页面，并且可以允许让用户自己的手指打开他期待的页面进入可视区。如果与此同时由于用户拖动了页面，应用改变了它自身的外观会怎么样？听上去很有趣但是很难吗？让我们看看使用Vue.js实际上是多么的简单。

入门

首先，我们需要一个tab bar滑动切换组件，这里有一大堆提供不同功能的可选择产品，这里我们使用Onsen UI提供的tab bar组件，它能够支持在切换时自定义操作行为。也许你并不了解它，Onsen UI其实有着一套iOS和Android基于Vue应用的组件库。对于一个现有的项目，可以使用NPM或Yarn来安装它。

1
2
$> npm install onsenui vue-onsenui --save-dev
$> yarn add onsenui vue-onsenui -D

在app中必须包含一些必要的文件；

1
2
import 'onsenui/css/onsenui.css'; // Webpack CSS import
import 'onsenui/css/onsen-css-components.css'; // Webpack CSS import
1
2
import VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);

因此，新的项目可以使用Vue CLI快速开始，并且可以选择性的添加Vuex和其他的一些功能。

1
2
$> vue init OnsenUI/vue-cordova-webpack # For Cordova apps
$> vue init OnsenUI/vue-pwa-webpack # For PWA

使用Vue的Tab Bar滑动切换

使用了Onsen UI后在Vue模板中添加一个小型的tab bar切换是非常简单的。可以如下去定义：

1
<v-ons-tabbar swipeable :tabs="tabs" />

如果有必要，swipeable属性能够在App的不同时刻切换开启允许和阻止侧滑，tabs是一个简单的数组对象用page，label，icon来描述每个选项卡的外观样式和内容。

在这之上，有更多的配置参数项可以用来修改默认行为再添加一些额外的自定义项就能够得到一个独一无二样式的app。让我们看下例子，on-swipe配置项可以用来当切换滑动页面时逐渐改变界面的颜色。

这里用v-ons-page, v-ons-toolbar和v-ons-tabbar组件来创建一个由简单toolbar和tab bar构成的页面。tabs属性包含一个标签页的数组，page和label属性将会被tab bar组件自身所用来描述标签的内容和外观样式。同时会提供类似theme这样的自定义属性，这些主题是由RGB颜色值组成的简单数组。

请注意swipeTheme计算属性是如何传递给toolbar组件和tab bar组件的。当这个属性变化时这两个组件的样式也会同时更新。在on-swipe
配置项中也提供了onSwipe函数方法，这个方法将会在当用户的手指在手机屏幕上移动时调用。

线性插值

线性插值简单讲就是在两个数据值之间产生中间点的公式。我们想在屏幕上逐渐从原始坐标x0移动一个点到一个结束点x1，我们仅仅需要做的是给这个公式提供两个点的位置和完成率从而得到这个点在特定位置停止时的坐标。

1
const lerp = (x0, x1, r) => (1 — r) * x0 + r * x1;

比如说，我们想从x0到x1生成3个点，第一步将需要r = 0.25（完成25%），第二步r = 0.5（完成50%），第三部r = 0.75（完成75%）。当然了只要提供不同的比率它也能够生成我们想要的一样多的中间点。

这不仅适用于物理距离，在前面的代码中，我们希望根据切换位置将一种颜色逐渐转换为另一种颜色。RGB颜色由3个值组成并可以分别插值，其他表示也可以被插值，但它们意味着更复杂的代码。

如果给每个选项卡分配一个不同的RGB颜色数组，我们将能够根据当前的滑动位置插入这些值到每一个中去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onSwipe(index, animationOptions) {
  this.animationOptions = animationOptions;
  
  const x0 = Math.floor(index),
        x1 = Math.ceil(index),
        ratio = index % 1;
  
  this.colors = this.colors.map((c, i) =>
    lerp(
      this.tabs[x0].theme[i],
      this.tabs[x1].theme[i],
      ratio
    )
  );
}

这将分配一个新的颜色数组this.colors，根据这些颜色值使用this.swipeTheme计算属性来创建有效的CSS语法。

注意animationOptions也作为第二个参数提供。当页面划出时它将是空值，当释放页面切换时，tab bar将用手指的速度完成切换滑动动画。这个给定的速度值将作为duration和timing来创建一个CSS动画效果。用这样的方式，所有的动画将会同步执行。

接下来是什么

可以看出，Vue的声明性让这一切真的很简单。我们可以去更新一个特定的属性而不是从DOM中抓取元素手动去改变其样式。一段稍早前代码完成的Cordova应用在这里（https://onsenui.github.io/vue-onsenui-kitchensink/）能够找到。它遵循相同的概念增加了更多的插值公式。假如你想知道更多关于基于Vue的Onsen UI，可以看看其官方网站（https://onsen.io/vue/）。

坚持原创技术分享，您的支持将鼓励我继续创作！