Developers can abstract the functional modules in the page into custom components for repeated use in different pages; Complex pages can also be broken up into low-coupling modules to aid code maintenance. Create custom components: Create a “Components” folder in the page and place the required component folder as follows:

page

<view class="list" style="padding:50rpx 0">
  <view class="listLeft"> Degree </view> // When hand click, trigger choose function, choose to obtain the current array index, assign value to activeIndex, then by judging activeIndex===index to make the current class=active <view bindtap="choose" data-i='{{index}}' class="{{activeIndex===index? 'active':''}}" wx:for='{{3}}'> 0 < / view > < / view >Copy the code
.list{
  display: flex;
  margin: 10rpx 0;
}
.list .listLeft{
  min-width: 100rpx;
}
.list view{
  margin: 0 10rpx;
}
.active{
  background: orangered;
  color: #fff;
}
Copy the code
// pages/detail/detail.js$get.$attr
} from '.. /.. /utils/fun.js'Page({// When this event is triggered, activeIndex The value of data- I in the current view choose(e){let i = $attr(e,'i') this.setData({activeIndex: I})}, data: {activeIndex:0},})Copy the code

Custom Components

Put the code style language above in the corresponding WXSS file in components, mine in guige/ index.wxCSS

/* pages/components/guige/index.wxss */
.list{
  display: flex;
  margin: 10rpx 0;
}
.list .listLeft{
  min-width: 100rpx;
}
.list view{
  margin: 0 10rpx;
}
.active{
  background: orangered;
  color: #fff;
}
Copy the code

The corresponding WXML is placed in the corresponding WXML, where variables between labels such as {{label}} are values passed in from other pages and passed in by properties. Here is the page in Components, where variables are values in {{}} from properties

<! --pages/components/guige/index.wxml--> <view class="list">
  <view class="listLeft">{{label}}</view>
  <view bindtap="choose" data-i='{{index}}' class="{{activeIndex===index? 'active':''}}" wx:for='{{list}}'>{{item}}</view>
</view>

Copy the code

The js file of components is different from that of ordinary ones. Methods should be placed in methods, data should be placed in values that do not need to be passed, and Properties should be placed in values that are passed, where variables are used as properties, and their property values are arrays. Other page data is passed through the properties of components

Properties :{// Pass label as a string with the default value in value. Label :{type:String,
      value:'species'
    },
    list:{
      type: Array
    }
  },
Copy the code

Here are other pages referencing custom components, defining component names and paths in JSON, introducing them with names in the page, and passing labels and lists

<h1 label='species' list='{{typeList}}'></h1>
Copy the code
{
  "usingComponents": {
    "h1":".. /.. /components/guige/index"}}Copy the code

You can also define bind-tab in the component so that you don’t have to create a new event in each view

// pages/components/guige/index.js
import {
  $get.$attr
} from '.. /.. /utils/fun.js'Component({/** * Component property list */ properties: {label:{type:String,
      value:'species'
    },
    list:{
      typeData: {activeIndex:0}, / activeIndex:0}, / activeIndex:0}, / activeIndex:0}, / activeIndex:0}let i = $attr(e, 'i')
      this.setData({
        activeIndex: i
      })
    }
  }
})

Copy the code

Of course, we can also provide a node to host the child nodes provided by the component reference

<view>
  <slot></slot>
</view>
Copy the code

When the page references, just write

<h1 label='label'>111</h1>
Copy the code

But this method only works for passing text, not such types as arrays

This. TriggerEvent (‘aa’,this.data.count). Bindaa =”change” on the component where aa can be named. As long as you make sure that triggerEvent and bind follow the same character, you get the value from the e argument in the change method (optionally named change)

 this.triggerEvent('change', this.data.mycount)
Copy the code
 <counter bindchange="handleCountChange" count="{{count}}"></counter>
Copy the code

The ~