微信小程序封装tab组件--自定义组件

最新推荐文章于 2024-07-22 19:45:28 发布

暖风阵阵

最新推荐文章于 2024-07-22 19:45:28 发布

阅读量548

点赞数

分类专栏：微信小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/weixin_46899191/article/details/120190006

版权

微信小程序专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中创建一个可定制的tab组件，通过`tab.wxml`、`tab.js`和`tab.wxss`实现子组件的交互，以及在父组件`index.js`中调用和响应子组件的`onTab`事件。通过实例展示了如何传递参数和更新状态，适用于菜单导航和选项卡切换场景。

摘要由CSDN通过智能技术生成

微信小程序封装组件

- - 1，准备子组件

1，准备子组件

//新建components文件夹，再建tab文件如下
// (1)tab.wxml
<view class="tabBox">
  <view wx:for="{{tabList}}" wx:key='index' class="tab">
    <view class='{{item.id==tabId?"active":""}}' 
    bindtap="_tabChange" 
    data-id='{{item.id}}'>
    {{item.title}}
  </view>
  </view>
</view>

// (2)tab.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  //接收父组件的参数
  properties: {
    tabList: {            
      type: Array,      
      value: []     
    },
    tabId: {            
      type: String,      
      value: '0'    
    },
    
  },
//组件的初始数据
  data: {
  
  },
//组件的方法列表
  methods: {
    _tabChange(e){
      let tabId =  e.currentTarget.dataset.id
      //更新子组件内
      this.setData({
      	 tabId :tabId
      })
     //调用父组件自定义方法，传参
      this.triggerEvent('onTab', tabId)
    },
  }
})

// (3)tab.wxss
.tabBox{
  display: flex;
} 
.tab{
  width: 200rpx;
  margin-top: 20rpx;
  text-align:center;
}
.tabBox .active{
  color: red;
  font-size: 32rpx;
  font-weight: 700;
  border-bottom: 4rpx solid red;
}

### 2，在父组件中使用
```javascript
// （1）index.json引入
"usingComponents": {
    "tab":"/components/tab/tab"
  },

// （2）index.wxml使用
<tab tabList='{{tabList}}' tabId='{{tabId}}' bind:onTab='onTab'></tab>
//自定义方法 = 方法名

// （3）index.js
// pages/eg-flex-one/index.js
Page({
  data: {
    tabList:[
      {title:'美食',id:'0'},
      {title:'风景',id:'1'},
      {title:'生活',id:'2'}
    ],
    tabId:'0',
 }

  onTab(e){
   //得到子组件传来的参数
    let tabId = e.detail
    this.setData({
      tabId:tabId
    })
    console.log(tabId)
  },
 })