微信小程序学习笔记——自定义组件步骤

类似vue或者react中的自定义组件

步骤：

Step1：新增组件

① 根目录下新建 components 文件夹

② 在 components 文件夹中，新建自定义组件文件夹

 

③ 右击  Tabs 文件夹 ，然后点击 弹出的菜单中的 “新建Compent”，输入组件名称，自动生成4个文件

 

Step2 ：声明组件

Step3 ：使用组件  

<view class="tabs">
    <view class="tabs_title">
        <!-- <view class="title_item active">首页</view>
        <view class="title_item">原创</view>
        <view class="title_item">关于</view> -->
        <view 
            wx:for="{{tabs}}" 
            wx:key="{{id}}" 
            data-index="{{index}}"
            class="title_item {{item.isActive?'active':''}}"
            bindtap="handleItemTap"
        >
            {{item.name}}
        </view>
          
    </view>
    <view class="tabs_content">
            <view class="detail">
                
            </view>
              
    </view>
</view>

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:'首页',
        isActive:true
      },
      {
        id:1,
        name:'原创',
        isActive:false
      },
      {
        id:2,
        name:'分类',
        isActive:false
      },
      {
        id:3,
        name:'关于',
        isActive:false
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      const {index} = e.currentTarget.dataset

      //最严谨的写法 重新拷贝一份数组 ，在对这个额数组的备份进行处理
      //let list = JSON.parse(JSON.stringify(this.data.tabs))
      //不要直接修改 this.data.数据
      let list = this.data.tabs;
      list.forEach((v,i) => {
       // i===index ?v.isActive = true: v.isActive = false
        if(i==index){
          v.isActive = true
        }else{
          v.isActive = false
        }
      });
      console.log(list)
      this.setData({
        tabs:list
      })
    },
  }
})

/* components/Tabs/Tabs.less */
.tabs{
    display: flex;
    flex-direction: column;
    height: 100%;
    .tabs_title{
        display: flex;
        padding: 10rpx;
        .title_item{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding:5rpx;
            border-bottom:  5rpx solid transparent;
        }
        .active{
            color: red;
            border-bottom:  5rpx solid currentColor;
        
        }
    }
    .tabs_content{
        flex:1;
       overflow: auto;
        .detail{
            height: 1000px;
        }
        
    }
    
}