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

发表于 更新于 阅读次数：

前言

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

源代码

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小清风