微信小程序–自定义公共组件

微信小程序–自定义公共组件

存放位置：component/自定义组件名-称文件夹

使用方法：在页面的json文件中，然后在页面以标签形式使用

{
  "usingComponents": {
    "searchInput": "../../component/searchInput/searchInput",
    "tabs": "../../component/tabs/tabs"
  },
  "navigationBarTitleText": "商品列表"
}

搜索框：searchInput

<view class="search_input">
  <navigator url="/pages/search/search" class="u-f-ajc">
    搜索
  </navigator>
</view>

/* component/searchInput/searchInput.wxss */
@import "../../styles/flex.wxss";
.search_input {
    height: 90rpx;
    padding: 10rpx;
    background-color: var(--themeColor);
    navigator {
        height: 100%;
        background-color: #fff;
        border-radius: 15rpx;
        color: #666;
    }
  }

{
  "component": true,
  "usingComponents": {}
}

tab栏切换

<view class="tabs">
  <view class="tabs_title">
    <view class="title_item {{item.isActive?'active':''}}" wx:for="{{tabList}}" wx:key="id" bindtap="handleItem" data-index="{{index}}">
      {{item.name}}
    </view>
  </view>
  <view class="tabs_content">
    <!-- slot 标签  其实就是一个占位符  插槽
      等到 父组件 调用 子组件的时候 再传递  标签过来  最终  这些被传递的标签
      就会替换 slot 插槽的位置 -->
    <slot></slot>
  </view>
</view>

/* component/tabs/tabs.wxss */
.tabs {
    .tabs_title {
        display: flex;
        padding: 10rpx 0;
      .title_item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0;
      }
    }
    .active {
        color: red;
        border-bottom: 5rpx solid currentColor;
    }
    .tabs_content {
  
    }
  }

{
  "component": true,
  "usingComponents": {}
}

// component/tabs/tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList: {
      type: Array,
      value: []
    }
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    handleItem(e) {
      const { index } = e.currentTarget.dataset;
      this.triggerEvent("itemChange",{index});
    }
  }
})