微信小程序【icon图标】【radio单选框】【checkedbox复选框】【自定义组件】【自定义组件-Tabs-样式优化】【自定义组件-标题激活选中】【父向子传递数据】【子向父传递数据】

<icon type="success" size="60" color="yellow"></icon>
<icon type="info" size="60" color=""></icon>
<icon type="success_no_circle" size="60" color=""></icon>
<icon type="warn" size="60" color=""></icon>
<icon type="waiting" size="60" color=""></icon>
<icon type="download" size="60" color=""></icon>
<icon type="search" size="60" color=""></icon>
<icon type="clear" size="60" color=""></icon>

Page({
data:{
  gender:""
},
handleChange(e){
  let gender=e.detail.value;
  this.setData({
    gender
  })
}
  
})

<radio-group bindchange="handleChange">
<radio color="red" value="male">男士</radio>
<radio color="red" value="female">女士</radio>
</radio-group>

<view>你选中的是：{{gender}}</view>

<view>
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>


</checkbox-group>
<view>
选中的水果:{{checkedList}}
</view>

</view>

// pages/demo06/demo06.js
Page({
  data: {
      list:[{
        id:0,
        name:"苹果",
        value:"apple"
      },
      {
        id:1,
        name:"香蕉",
        value:"bananer"
      },
      {
        id:2,
        name:"葡萄",
        value:"grape"

      }
    
    
    ],checkedList:[]

  },
handleItemChange(e){
 const checkedList=e.detail.value;
this.setData({
  checkedList
})

}



})

 自定义组件完成

 

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

.tabs{}
.tabs_title{
  display: flex;
  padding: 10rpx 0;

}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color: red;
  border-bottom: 5rpx solid rgb(224, 28, 28);
}
.tabs_content{}

// 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: {

  }
})

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

标题激活选中：

// 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 {tabs}=this.data;
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
this.setData({
  tabs 
})
    }

  }
})

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

父向子传递数据：

子向父传递数据：

// pages/demo07/demo07.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[{
      id:0,
      name:"首页",
      isActive:true
      },
      {
      id:1,
      name:"原创",
      isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
        },
        {
          id:3,
          name:"关于",
          isActive:false
          }
      ]
  },
handleItemChange(e){
const {index}=e.detail;
console.log(index);


 let {tabs}=this.data;
 tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
this.setData({
  tabs 
})

}
  
})

<Tabs tabs="{{tabs}}"  binditemChange="handleItemChange"></Tabs>

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
// aaa:{
//   type:"String",
//   value:""
// }
tabs:{
  type:Array,
  value:[]
}

  },
  data: {},
  methods: {
    handleItemTap(e){
const {index}=e.currentTarget.dataset;
this.triggerEvent("itemChange",{index});

// let {tabs}=this.data;
// tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
// this.setData({
//   tabs 
// })
    }

  }
})