小程序topBar封装，小程序自定义头部导航栏

最新推荐文章于 2025-03-29 11:20:55 发布

程序员张礼奎

最新推荐文章于 2025-03-29 11:20:55 发布

阅读量537

点赞数 1

分类专栏：小程序也让人头疼

本文链接：https://blog.youkuaiyun.com/zlk4524718/article/details/97309674

版权

小程序也让人头疼专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在小程序中进行topBar的封装，详细讲解了页面结构和JS实现，帮助开发者创建个性化的头部导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、页面

<view class="tabctrl">
  <block wx:for="{{titles}}" 
         wx:key="index">
    <view class="tab-item {{currentindex == index ? 'active' : ''}}"
          bind:tap="onItemClick"
          data-index="{{index}}">
      <text>{{item}}</text>
    </view>
  </block>
</view>

2、js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
      titles:{
        type:Array,
        value:''
      }
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    onItemClick(event){
      const index = event.currentTarget.dataset.index;
      this.setData({
        currentindex:index
      })

      this.triggerEvent("getindex",{index})
     
    }
  }
})