小程序 ----- 自定义组件（一）对组件的简单使用

发表时间：2021-1-5

发布人：葵宇科技

浏览次数：46

使用自定义组件的方式来构建页面，不是小程序自带的组件

1、创建自定义组件

类似于页面也是由 wxml，js，json，css 四个页面组成，一般放在专门的文件夹中

文件内容

2、在json 文件中引用自定义组件

3、编写自定义组件

将标题灵活话，通过循环方式赋值

4、实现点击不同标题样式随之改变

* 事件回调函数在页面js 与组件js 的区别?

* 1、页面 .js 文件中存放事件回调函数的时候存放data 同级下！！

* 2、组件 .js 文件中存放事件回调函数的时候必须放在methods(组件方法列表)

其中获取data 数据中的不同写法

 解构对复杂类型进行解构时，复制一份变量引用
 let tabs = this.data.tabs; 相当于   let {tabs} = this.data; 
 最严谨的做法，重新拷贝一份数组，再对这个数组的备份进行处理，不要直接修改this.data 数据
 let tabs = JSON.parse(JSON.stringify(this.data.tabs));
     
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {tabs} = this.data;
      //let tabs = this.data.tabs;

自定义组件小小代码：

wxml中

<!-- 自定义组件主要分为 标题和内容 -->
<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> -->
<!-- 通过循环的方式实现 
wx:for ="{{数组名}}" 
wx:key ="id关键字" 
//判断是否为真
class="title_item {{item.isActive?'active':'true'}}"
-->
<view wx:for ="{{tabs}}" wx:key ="id" 
  class="title_item {{item.isActive?'active':'true'}}"
  bindtap="hanldeItemTap"
  data-index ="{{index}}"
>
{{item.name}}

</view>

  </view>
<view class="tabs_conent">内容</view>
</view>

wxss 中

/* 设置组件样式
  display: flex;  变成伸缩盒子
  justify-content: center; 文字水平对齐
  align-items: center;  垂直对齐
  border-bottom: 10rpx solid currentColor;  文字下划线
  flex 让所有弹性盒模型对象的子元素都有相同的长度，并且忽略其内部的内容
*/
.tabs{}
.tabs_title{
  
  display: flex;
  padding: 10rpx;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color: red;
  border-bottom: 10rpx solid currentColor;
}
.tabs_conent{}

js 中

// component/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
      }

    ]

  },

  /**
   * 存放事件回调函数 页面js 与组件js 的区别?
   *  1、页面 .js 文件中存放事件回调函数的时候存放data 同级下！！
   *  2、组件 .js 文件中存放事件回调函数的时候必须放在methods(组件方法列表)
   */

  methods: {
    /*
     实现点击标题样式改变
     1、在methods 中绑定点击时间
     2、获取被点击标题的索引
     3、获取原数组
     4、对数组循环，给每一个循环性选中属性改为false,将当前索引项改为true
    
    */

    hanldeItemTap(e){
      //  console.log(e);   通过打印获取index 得知 dataset 含有index
      //获取索引
      const {index} = e.currentTarget.dataset;
      //获取data 中数组
      /*
      解构对复杂类型进行解构时，复制一份变量引用
      let tabs = this.data.tabs; 相当于   let {tabs} = this.data; 
    最严谨的做法，重新拷贝一份数组，再对这个数组的备份进行处理，不要直接修改this.data 数据
    let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      */
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {tabs} = this.data;
      //let tabs = this.data.tabs;
      //循环数组 [].forEach遍历数组时修改 v 也会修改源数组
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      //把值重新丢回去
      this.setData({
        tabs
      })
        
    },

    ahanldeItemTap(e){
      //  console.log(e);   通过打印获取index 得知 dataset 含有index
      //获取索引
      const {index} = e.currentTarget.dataset;
      //获取data 中数组
      /*
      解构对复杂类型进行解构时，复制一份变量引用
      let tabs = this.data.tabs; 相当于   let {tabs} = this.data; 
    最严谨的做法，重新拷贝一份数组，再对这个数组的备份进行处理，不要直接修改this.data 数据
    let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      */
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {atabs} = this.data;
      //let tabs = this.data.tabs;
      //循环数组 [].forEach遍历数组时修改 v 也会修改源数组
      atabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      //把值重新丢回去
      this.setData({
        atabs
      })
        
    }
  }
})