自定义组件[1]和forEach（11）

步骤一：创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

1. 在根目录下新建一个Component，Component名字就是新的组件标签名
   
2. 在json文件中会有"component": true,
3. 声明自定义组件，在page中选择要使用组件的页面，在usingComponents中声明组件路径
   
4. 然后即可在本page中自由使用这个Tabs标签
   

二、编辑组件内容

tabs.wxml

<view class="tabs">
  <view class="tabs_title">
    <view class="tabs_item active" >首页</view>        
    <view class="tabs_item">原创</view>      
    <view class="tabs_item">分类</view>      
    <view class="tabs_item">关于</view>        
  </view>
  <view class="tabs_content">内容</view>
</view>

tabs.wxss

/* components/Tabs/Tabs.wxss */
.tabs{}
.tabs_title{
  display: flex;
  padding: 10rpx;
}
.tabs_item{
  flex: 1;
  display: flex; /*垂直布局 */
  justify-content: center;/*  项目置于容器中心*/
  align-items: center;
}
.active{
  color: red;
  border-bottom : 10rpx solid currentColor;
}
.tabs_content{

}

tabs.js

// components/Tabs/Tabs.js
//在写了这些以后，wxml相应改变
Component({
  data: {
    tabs:[
      {
        id:0,
        name:"原创",
        isActive:false
      },
      {
        id:1,
        name:"分类",
        isActive:true
      },
      {
        id:2,
        name:"关于",
        isActive:false
      },
      {
        id:3,
        name:"首页",
        isActive:false
      }
    ]
  }
})

修改后的wxml（变成动态加载，只需在js的tabs的数组中加入相应的项即可）

<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="tabs_item active" >首页</view>        
    <view class="tabs_item">原创</view>      
    <view class="tabs_item">分类</view>      
    <view class="tabs_item">关于</view>         -->
    <view 
    wx:for="{{tabs}}"
    wx:key="id"
    class="tabs_item {{item.isActive?'active':''}}" >
      {{item.name}}
    </view>
  </view>
  <view class="tabs_content">内容</view>
</view>

三、激活点击效果（点击事件）

页面js文件中，存放事件的回调函数，存放在data同级下
页面js文件中，存放组件的回调函数，存放在methods下
数组下标默认index，当前项默认item
let：局部变量，var：全局变量
js

// components/Tabs/Tabs.js
Component({
  data: {
    tabs:[
      {
        id:0,
        name:"原创",
        isActive:true
      },
      {
        id:1,
        name:"分类",
        isActive:false
      },
      {
        id:2,
        name:"关于",
        isActive:false
      },
      {
        id:3,
        name:"首页",
        isActive:false
      }
    ]
  },
  //存放组件的回调函数，存放在methods下
  //获取被点击的索引，获取原数组，循环，将active改为false
  //为激活项添加选中效果
  methods: {
    handle_item_click(e){
      //因为要获取索引下标，就需要参数
      console.log("点击");
      //console.log(e);
      //点击获取点击项的数组下标
      const {index}=e.currentTarget.dataset;
      //获取数组信息
      let {tabs}=this.data;//复制了data中一份tabs的引用
      //foreach改变active的值
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      //将数据设置到页面
      this.setData({tabs})
      //1.当点击item，触发回调函数，通过自定义标签获取当前index值，
      //2.然后把当前页面的data数据整个拿过来let {tabs}=this.data; 属于结构赋值，对象名要一致才行
      // 举个例子：let {a,b} = this.data相当于let a = this.data.a;let b = this.data.b;
      //3.forEach对数组的每个元素执行一次提供的函数，即对每一个下标为i的都执行一次三目运算
      //4.最后，将修改了的tabs设置到页面中
    }
  }
})

wxml

<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="tabs_item active" >首页</view>        
    <view class="tabs_item">原创</view>      
    <view class="tabs_item">分类</view>      
    <view class="tabs_item">关于</view>         -->
    <view 
      wx:for="{{tabs}}"
      wx:key="id"
      class="tabs_item {{item.isActive?'active':''}}" 
      bindtap="handle_item_click"
      
      data-index="{{index}}"
    >
      {{item.name}}
    </view>
  </view>
  <view class="tabs_content">内容</view>
</view>

四、forEach

forEach() 方法对数组的每个元素执行一次提供的函数
foreach不支持在循环中添加删除操作，可以查看和修改

foreach的语句格式为：forEach（value，index，array）

forEach方法中的function回调有三个参数：
第一个参数是遍历的数组内容（如果内容不是单独的数字，字符，而是元组，其值和第三个参数一样）
第二个参数是对应的数组索引，
第三个参数是数组本身（可以省略）