# 小程序制作滚动动画的顶部导航栏
微信小程序制作滚动动画的顶部导航栏
# 制作组件headerNavbar
<view class='header' style='height:{{navbarBtn.height}}px;'>
<view class="navbar-icon" style="padding-top:{{navbarBtn.top }}px;" wx:if='{{navbarData.showCapsule ? navbarData.showCapsule : true}}'>
<van-icon wx:if='{{haveBack}}' bindtap="goBack" name="arrow-left" class="floatL" size="24px" />
<van-icon wx:if='{{!haveBack}}' bindtap="goHome" name="arrow-left" class="floatL" size="24px" />
</view>
</view>
1
2
3
4
5
6
2
3
4
5
6
/*
* @Author: 时不待我 790002517@qq.com
* @Date: 2023-03-20 16:35:47
* @LastEditors: 时不待我 790002517@qq.com
* @LastEditTime: 2023-03-26 15:40:54
*/
// components/Goindex/Goindex.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
navbarData: { // 由父页面传递的数据
type: Object,
value: {},
observer: function (newVal, oldVal) {
}
}
},
data: {
haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
navbarBtn: { // 胶囊位置信息
height: 0,
width: 0,
top: 0,
bottom: 0,
right: 0
},
showMenu: true, // 菜单的显示状态
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
goHome() {
wx.redirectTo({
url: '/pages/card/card',
})
},
goBack: function () {
wx.navigateBack({
delta: 1
});
},
},
// 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度
attached: function () {
let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度
let headerPosi = app.globalData.systeminfo.headerBtnPosi // 胶囊位置信息
let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
height: statusBarHeight + 44,
width: headerPosi.width,
// 胶囊top
top: statusBarHeight * 1.09,
// 屏幕宽度 - 胶囊right
right: app.globalData.systeminfo.screenWidth - headerPosi.right
}
let haveBack;
if (getCurrentPages().length === 1) { // 当只有一个页面时
haveBack = false;
} else {
haveBack = true;
}
this.setData({
haveBack: haveBack, // 获取是否是通过分享进入的小程序
navbarBtn: btnPosi
})
},
lifetimes: {
ready() {
},
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
.header{
display:flex;
align-items: center;
position: fixed;
z-index: 99999;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 页面使用
<scroll-view scroll-y="{{true}}" style="height:100vh" data-status-bar-height="44" scroll-with-animation id="headers" throttle="{{false}}" >
<view class="animalDetails" >
<headerNavbar ></headerNavbar>
</view>
</scroll-view>
1
2
3
4
5
2
3
4
5
_animate() {
//跨组件元素选择器
this.animate('.animalDetails>>>.header', [{
backgroundColor: 'transparent',
}, {
backgroundColor: '#FFF',
}], 1000, {
scrollSource: '#headers',
timeRange: 1000,
startScrollOffset: 0,
endScrollOffset: 44,
})
//跨组件元素选择器
this.animate('.animalDetails>>>.floatL>>>.van-icon', [{
color: '#FFF',
}, {
color: '#000',
}], 1000, {
scrollSource: '#headers',
timeRange: 1000,
startScrollOffset: 0,
endScrollOffset: 44,
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28