文章列表 - 第4页
所有文章的完整列表，按时间倒序排列 - 第4页
引言：此方法可用作大部分微信小程序支持，但uni-app文档中却找不到相关说明的API
需求
需要在微信小程序中，实现一个中间图标突出显示的异形导航栏。
如下图
实现方法设计
要做这种异形的导航栏，用直接在配置文件里面写list的方法肯定做不到。那么，就有以下两种可替代方法。
在每一个页面都加载一个tabBar组件，与页面同时渲染。
设置自定义tabBar,修改tabBar的样式。
优缺点分析：方法1实现起来略为简单，但是会出现代码可重用率低，降低性能，已经界面跳动等问题。方法2则是微信官方提供的，自定义方式，相信在性能方面也会有很大的优势。故选择方法2。
1. 查看文档及官方Demo
简要描述一下就是需要在根目录中加入一个custom-tab-bar目录，里面的文件结构与自定义组件的结构一致。然后再在小程序配置文件中修改tabbar为custom模式。
主要重点为三个部分
- 配置文件
- custom-tab-bar目录
- 页面生命周期中的设置索引方法
这段代码其实很容易理解，pageLifetimes就是监听组件所在页面的生命周期。上述代码就是监听页面显示。当页面显示后，获取到tabBar的对象，然后再设置tabBar中的index索引。
2. 迁移到uni-app框架
上面的方法是使用微信小程序的开发方式，而我使用的是uni-app框架开发微信小程序的。所以我们需要把它们移植到uni-app框架内。
- 配置文件的修改
uni-app中，page.json被编译为微信小程序的app.json。所以，我们直接修改page.json
- custom-tab-bar目录的适配
我们知道，uni-app使用的是类Vue开发，将一个Vue文件编译为四个微信页面文件（wxml，wxss，json，js）。那么，是否可以直接写一个custom-tab-bar.vue的文件呢？刚开始我也是这么想的，后来发现uni-app只会编译page目录和component目录下的vue文件。而微信小程序要求custom-tab-bar必须在项目的根目录下。那么就只能在uni-app下创建一个custom-tab-bar目录，并老老实实写微信四件套了。
写完后，uni-app会将该目录完美的复制至微信小程序项目的根目录。
- tab页面内的适配方法
这个在我实际开发中，是最令我头痛的了。因为微信小程序的this引用与uni-app的this引用并不相同。所以如果直接复制代码是会编译出错的。而另一个问题则是，uni-app并未提供pageLifetimes的事件监听。
在我经过一番摸索之后，发现将设置索引方法写在onShow事件里面，效果是等效的。接下来便只剩下this的问题了。
如果直接复制的话，会出现无任何效果的情况
因为uni-app的this引用不一样，所以它在判断getTabBar的时候，获取的是“undefined”所以不会执行下面的操作。如果你将判断去掉，则会直接报“undefined”错误。
难道实现不了？其实不然，万变不离其宗。uni-app也是编译到小程序的，所以绝对有迹可循。
我们首先看看uni-app里面this的内容。
我们可以很明显的看到里面有个$mp的对象，说明这应该是微信小程序专用的对象。接下来我们继续分析$mp。
这里面有一个隐藏很深的getTabBar方法，我们直接调用它，和在微信小程序里面调用this.getTabBar是等效的。
所以我们就可以把onShow里面的内容写成这样。
一些优雅点的封装
设置索引方法独立出来
在methods对象中，添加
setTabBarIndex(index){
if (typeof this.$mp.page.getTabBar === 'function' &&
this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected:index
})
}
}
使用mixin避免重复书写复制
在main.js中，添加
Vue.mixin({
methods:{
setTabBarIndex(index){
if (typeof this.$mp.page.getTabBar === 'function' &&
this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected:index
})
}
}
}
})
混入后的使用
在页面文件中
效果展示
本文会讲述如何使用scss/sass在微信小程序中实现列表顺序加载的动画。
所用的css特性
CSS animations
CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：
能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。
动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。
让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
css animations的属性和子属性见https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E9%85%8D%E7%BD%AE%E5%8A%A8%E7%94%BB
可主要分为两大部分，动画的实现形式和动画的属性规则。
以下仅列出本文所用的属性。
animation-timing-function
animation-timing-function 规定动画的速度曲线。
animation-delay
顾名思义，设置动画的持续时间，单位秒
animation-fill-mode
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
使用keyframes定义动画序列
keyframes就是一个描述关键帧的属性，通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。
示例
@keyframes list {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
如上代码所示，定义了一个@keyframe名字叫list，在动画开始时使用缩放0%，结束时缩放100%。那么它在整个动画的过程中，便会根据浏览器的性能展示一个从0%-100%渐变的动画。是不是根据有点意思？当然，你也可包含设置任何额外可选的关键帧，描述动画开始和结束之间的状态，比如45%。
至此我们已经实现了组件显示时逐渐放大的效果
所用的scss特性
以下为简介，详细内容请转至官方文档
嵌套规则 (Nested Rules)
scss/Sass允许将一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内。
引用父选择器:&
你可以 & 字符来明确地表示插入指定父选择器。
变量: $（Variables: $ ）
以美元符开头，可当变量使用。
@mixin混入指令 (Mixin Directives)
混入(mixin)允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类（class），比如 .float-left。混入(mixin)还可以包含所有的CSS规则，以及任何其他在Sass文档中被允许使用的东西。