【代码】动态展现标题栏案例

前言

微信小程序动态展现标题栏案例

源代码

pages/components/nav/nav.wxml
1
2
3
4
5
6
7
8
9
10
<view class="nav">
<view
wx:for="{{ key }}"
class="{{ a == index ? 'active' : '' }}"
bindtap="click"
data-a="{{ index }}"
>
{{ item.title }}
</view>
</view>
pages/components/nav/nav.wxss
1
2
3
4
5
6
7
8
9
10
11
12
13
.nav {
display: flex;
}
.nav view {
flex: 1;
text-align: center;
line-height: 120rpx;
/* background: red; */
}
.nav .active {
color: #2095dd;
border-bottom: 5rpx solid #2095dd;
}
pages/components/nav/nav.js
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
Component({
/**
* 组件的属性列表
*/
properties: {
key: {
type: Array,
value: ""
}
},

/**
* 组件的初始数据
*/
data: {
a: 0
},

/**
* 组件的方法列表
*/
methods: {
click: function (event) {
this.setData({
a: event.target.dataset.a
});
}
}

})
pages/components/nav/nav.json
1
2
3
4
{
"component": true,
"usingComponents": {}
}
pages/index/index.json
1
2
3
4
5
{
"usingComponents": {
"nav": "../components/nav/nav"
}
}
pages/index/index.js
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
Page({

data: {
arr: [
{
id: 0,
title: "推荐"
},
{
id: 1,
title: "排行"
},
{
id: 2,
title: "分类"
},
{
id: 3,
title: "歌手"
},
{
id: 4,
title: "MV"
}
]
}

})
pages/index/index.wxml
1
<nav key="{{ arr }}"></nav>

完成

参考文献

哔哩哔哩——Python小清风