If you are interested in WeChat Mini Programs, you can follow me or join my WeChat Mini Program Development Exchange Group (173683895) to exchange and learn from each other. Gossip and advertising are prohibited.
Custom components I divided it into three simple steps, 1. Create components --- 2. Write components --- 3. Invoke and use components.
Step 1: Create the component
Create a modal folder, which contains four files josn.wxml.wcss.js, and then add "component" : true in josn (the function is to declare this group of files as custom components)
Step 2. Write the component code
In modal.wxml:
<view hidden='{{modalHidden}}'> <view class='mask_layer' bindtap='modal_click_Hidden' /> <view class='modal_box'> <view class="title">提示</view> <view class='content'> <text class='modalMsg'>{{modalMsg}}</text> </view> <view class='btn'> <view bindtap='modal_click_Hidden' class='cancel'>取消</view> <view bindtap='Sure' class='Sure'>确定</view> </view> </view> </view>
In modal.wxss:
.mask_layer { width: 100%; height: 100%; position: fixed; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden; } .modal_box { width: 76%; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 1001; background: #fafafa; margin: -150px 12% 0 12%; border-radius: 3px; } .title { padding: 15px; text-align: center; background-color: gazure; } .content { overflow-y: scroll; /*It can be scrolled beyond the height of the parent box*/ } .btn { width: 100%; margin-top: 65rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; background-color: white; } .cancel { width: 100%; padding: 10px; text-align: center; color: red; } .Sure { width: 100%; padding: 10px; background-color: gainsboro; text-align: center; } .modalMsg { text-align: center; margin-top: 45rpx; display: block; }in modal.js
Component({ properties: { modalHidden: { type: Boolean, value: true }, //The modalHidden property is defined here, and the property value can be specified when the component is used. The writing method is modal-hidden modalMsg: { type: String, value: ' ', } }, data: { // here is some component internal data text: "text", }, methods: { // put custom method here modal_click_Hidden: function () { this.setData({ modalHidden: true, }) }, // Sure Sure: function () { console.log(this.data.text) } } })
The third step, using components
Here I am calling the pages/modal/modal custom component on the pages/index/index page
First, the reference description is made in index.json, here is the tag name and reference path for setting the custom component
{ "usingComponents": { "modal": "../modal/modal" } }
<!-- call the modal component --> <modal modal-hidden="{{is_modal_Hidden}}" modal-msg="{{is_modal_Msg}}"/>Bind data in index.js,
Page({ data: { is_modal_Hidden:false, is_modal_Msg: 'I am a custom component' } })Rendering: