小程序-底部导航栏动画弹出效果实现

作者:dante_wd 发布时间:2019-07-08 15:43:02

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调用下展示,这样切换导航都会从隐藏到动画弹出来。



关于我 |  合作伙伴 |  用户注册 |  帮助中心 |  版权声明