微信小程序（tab栏的封装和使用）

130 阅读 0 评论 86 点赞

我是靠谱客的博主怕黑水壶，这篇文章主要介绍微信小程序（tab栏的封装和使用），现在分享给大家，希望可以做个参考。

my-tab.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
31
32
33
34
35
36
// component/my-tab/my-tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabArr:{
      type:Array,
      value:[]
    }
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    tabClick(e){
      this.setData({
        currentIndex:e.currentTarget.dataset.index
      })
      console.log(this.data.currentIndex);
      this.triggerEvent('tab',{
        tab_index: this.data.currentIndex,
        title: this.data.tabArr[this.data.currentIndex]
      })
    }
  }
})

my-tab.wxss

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* component/my-tab/my-tab.wxss */
.tab-box {
  display: flex;
  background: rgb(240, 239, 239);
  height: 100rpx;
  line-height: 100rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
}
.tab-box .active {
  color: red;
}

my-tab.wxml

复制代码

1
2
3
4
5
6
7
8
9
<!--component/my-tab/my-tab.wxml-->
<view class="tab-box">
  <block wx:for="{{tabArr}}" wx:key="index">
    <view class="tab-item {{currentIndex == index?'active':''}}" bindtap="tabClick" data-index="{{index}}">
      <text>{{item}}</text>
    </view>
  </block>
</view>

在页面中的·使用

复制代码

1
2
3
4
5
6
<!--index.wxml-->
<view class="container">
   <!-- tab标签栏实战 -->
   <my-tab bindtab="itemClick" tabArr="{{cates}}"></my-tab>
</view>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    title:"这是页面传的数据",
    cates:['推荐','热门','时尚','娱乐']
  },
  onLoad: function () {
    
  },
  search:function(e){
    console.log(e.detail.searchText);
  },
  itemClick: function(e){
    console.log(e.detail);
  }
})