很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验。如下图:
在开发者工具中预览效果
我们可以用两种方法实现这样动画,css3的过渡或者用js去控制。省事的当然是用css3来写啦,我们先来看看css3的具体实现。
css3实现:
先看最基本的.wxml布局:
从图中可以看到,当前tap的line是用专门用一个元素来做的。那么怎么让line跟着tab走动呢?就是红圈部分,用translateX位移来移动,而transitions实现一个过渡效果。
curtab就是当前点击tab的index,点击的tab的index * 250(一个tab的宽度)就能让line跟着走对应的位移了。
来看看.js部分:
这样就能简单实现一个tab跟随动画啦。
(以上方法有个不足,就是tab的宽度是固定的,但是在实际开发中更多时候会遇到宽度不固定的情况。)
js实现:
有些喜欢折腾的同学说想要js来实现呢?当然也是可以的,用js来实现的思路也是一样,用控制line元素的translateX值。那么怎么知道应为位移多少呢?就是动态的去获取该位移的值,然后赋给translateX。
说到动态的去获取元素额left值,可以用到小程序的 wx.createSelectorQuery 这个api在传入元素后返回元素的四个位移值。(这里不细说api的用户,不清楚的同学请自行查看文档哈哈哈)
那是不是可以:
来看看具体的实现:
emmm最后说一下,前端时间看到过一个很骚的 *** 作,同样是用纯css实现这种跟随动画,先看看效果图:
.css
1、tabBar
在app.json文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。
(1)tabBar相关属性
color:tab上的文字默认颜色,仅支持十六进制颜色。
selectedColor:tab上的文字选中时的颜色,仅支持十六进制颜色。
backgroundColor:tab的背景色,仅支持十六进制颜色。
borderStyle:tabbar上边框的颜色, 仅支持 black / white。
position:tabBar的位置,默认值是: bottom,仅支持 bottom / top。当 position 为 top 时,不显示 icon。
custom:自定义tabBar。
"tabBar": {
"color": "#000000",
"selectedColor": "#336699",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"position": "bottom"
}
(2)list
list:tab的列表。
list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。
pagePath:页面路径,必须在pages 中先定义。
text:tab 上按钮文字。
iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。selectedIconPath:选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "assets/icon/home.png",
"selectedIconPath": "assets/icon/home2.png"
},
{
"text": "列表",
"pagePath": "pages/list/list",
"iconPath": "assets/icon/list.png",
"selectedIconPath": "assets/icon/list2.png"
}
]
2、页面跳转
(1)跳转普通页面
方法① navigator组件
<!-- 跳转到普通页,可以通过返回按钮返回 -->
<navigator url="../detail/detail">到详情页</navigator>
方法② navigateTo()方法
navigateTo()方法,用于跳转普通页面。
<view bindtap="gotoDetail">到详情页</view>
gotoDetail(){
//使用全局api跳转,navigateTo()方法,用于跳转普通页面
wx.navigateTo({
url: '../detail/detail',
})
}
(2)跳转tabBar页面
方法① navigator组件
如果要使用navigator组件跳转tabBar页面,需要设置open-type="switchTab"。
<!-- 跳转到tabBar页面,不可以通过返回按钮返回。因为跳转到指定的tabBar页面后,会关闭其他所有页面 -->
<navigator url="../list/list" open-type="switchTab">到列表页</navigator>
方法② switchTab()方法
switchTab()方法,用于跳转tabBar页面。
<view bindtap="gotoList">到列表页</view>
gotoList(){
wx.switchTab({
url: '../list/list',
})
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)