立即注册
 找回密码
 立即注册

梦幻岛

搜索
热搜: 活动 交友
返回列表
查看: 335|回复: 0

底部导航栏动画弹出效果实现

[复制链接]

35

主题

35

帖子

308

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
308
发表于 2019-6-17 17:24:52 | 显示全部楼层 |阅读模式

image.png

自定义的底部导航栏有一个问题,就是跳转页面时都是从右往左转,而底栏是贴着底边的。切换导航就会有一闪一闪的感觉很不友好。

两个方案可以解决,一个是底部为主页面,上边的内容全是组件,模板一个个引入。但是页面多了,不太合适。

另外一个方案,取巧,可以在切换的过程中先隐藏底栏,然后自动弹出,这样就好多了。


底栏页面:

image.png

样式文件:

.icon {

width: 46rpx;

height: 46rpx;

}


.bottomtab{

position: fixed;

bottom: 0;

left: 0;

z-index: 9000;

display: grid;

background: #fff;

width: 100%;

}


.itemview {

display: flex;

font-size: 20rpx;

color: #8a8a8a;

height: 90rpx;

padding: 20rpx 0 14rpx 0;

}


.tabBar-item {

float: left;

width: 25%;

text-align: center;

overflow: hidden;

}


.tabBar-itemhover{

float: left;

width: 25%;

text-align: center;

overflow: hidden;

background-color: #fff;

}


/*当前字体颜色*/


.tabBartext {

color: red;

}


JS文件:

data: {

showtabbar: false,

animationData: {}

},

showtab: function(e) {

console.log('弹出tabbar');

var that = this;

// 显示遮罩层

var animation = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

that.animation = animation

animation.translateY(300).step()

that.setData({

animationData: animation.export(),

showtabbar: true

})

setTimeout(function() {

animation.translateY(0).step()

that.setData({

animationData: animation.export()

})

}.bind(that), 300)

},


hidetab: function (e) {

console.log('关闭tabbar');

var that = this;

// 显示遮罩层

var animation = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

that.animation = animation

animation.translateY(300).step()

that.setData({

animationData: animation.export(),

showtabbar: false

})

setTimeout(function () {

animation.translateY(0).step()

that.setData({

animationData: animation.export()

})

}.bind(that), 300)

},

},


默认进来底栏先隐藏,onload调用下展示,这样切换导航都会从隐藏到动画弹出来。



回复

使用道具 举报

返回列表
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表