簡介
小程序組件其實很簡單，其實我們用的view 笆环、text 因悲、lable 就是一個組件，只不過這些組件是小程序官方指定的峻黍，小程序的自定義組件一般使用場景為：有一段代碼或者一個功能复隆，經常在不同的頁面使用，這就導致我們需要在不同的頁面去寫重復的代碼姆涩，重復造輪子挽拂。
比如說好幾個頁面都會有列表，都需要搜索功能骨饿，哪我們就可以把搜索框做成組件亏栈，然后再需要的頁面直接引入進去，就可以使用宏赘。
效果圖
image.png
實戰(zhàn)之定義組件
一绒北、新建及存放位置
新建一個 components 文件夾，用于存放我們以后開發(fā)中的所用組件 如圖：
image.png
在components文件夾中右鍵察署，選擇"新建Component"镇饮；
二、相關配置
組件名稱.json 配置
{
"component": true,
"usingComponents": {}
}
在test.josn文件中添加字段 component：true 這個字段表明這是一個組件，這個字段在新建的頁面的json文件中是沒有的储藐，官方默認它為false俱济，也就是非組件
組件名稱.wxml
<!--搜索框-->
<view class="input_search_bar">
<view class="input_search_bar_form">
<!--點擊之后，出現input框 -->
<view class="input_search_bar_box">
<icon class="order_icon_search_in_box" type="search" size="20"></icon>
<input type="text" class="input_search_bar_input" maxlength="15" placeholder="{{holderText}}" value="{{inputVal}}"
bindinput="inputTyping" />
<!--輸入款字數大于0钙勃，則顯示清除按鈕 -->
<view class="order_icon_clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
<icon type="clear" size="20"></icon>
</view>
</view>
</view>
<!--動態(tài)出現的“搜索”鍵 -->
<view class="input_search_bar_cancel_btn" bindtap="searchBtn">搜索</view>
</view>
組件名稱.wxss
/**搜索框**/
.input_search_bar {
position: relative;
padding-top: 15rpx;
padding-left: 10rpx;
padding-right: 10rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
width: 740rpx;
}
.input_search_bar .input_search_bar_form {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: auto;
flex: auto;
border-radius: 15rpx;
background: var(--viewBackgroundColor);
}
.input_search_bar .input_search_bar_form .input_search_bar_box {
position: relative;
padding-left: 45rpx;
padding-right: 60rpx;
width: 100%;
box-sizing: border-box;
z-index: 1;
}
.input_search_bar .input_search_bar_form .input_search_bar_box .order_icon_search_in_box {
position: absolute;
left: 15rpx;
top: 8rpx;
}
.input_search_bar .input_search_bar_form .input_search_bar_box .input_search_bar_input {
height: 50rpx;
line-height: 50rpx;
font-size: 30rpx;
padding-left: 25rpx;
}
.input_search_bar .input_search_bar_form .input_search_bar_box .order_icon_clear {
position: absolute;
top: 0;
right: 0;
padding: 7rpx 8rpx;
}
.input_search_bar .input_search_bar_cancel_btn {
margin-left: 12rpx;
margin-top: 12rpx;
line-height: 28rpx;
color: var(--themeColor);
white-space: nowrap;
font-size: 30rpx;
}
組件名稱.js
Component({
/**
* 組件的屬性列表
*/
properties: {
holderText: {
type: String,
value: "請輸入內容"
}
},
/**
* 組件的初始數據
*/
data: {
inputVal: ""
},
/**
* 組件的方法列表
*/
methods: {
clearInput: function () {
this.setData({
inputVal: "",
});
this.triggerEvent("searchVal", this.data.inputVal);
},
inputTyping: function (e) {
this.setData({
inputVal: e.detail.value
});
},
searchBtn: function () {
this.triggerEvent("searchVal", this.data.inputVal);
}
}
})
自定義組件的 js 文件中蛛碌，需要使用 Component() 來注冊組件，并提供組件的屬性定義辖源、內部數據和自定義方法蔚携。組件的屬性值和內部數據將被用于組件 wxml 的渲染
實戰(zhàn)之調用組件
調用頁面.json
{
"usingComponents": {
"InputSearch":"/components/InputSearch/InputSearch"
},
"navigationBarTitleText": "加工云-已發(fā)布訂單"
}
調用頁面.wxml
<view class="my_order_page">
<InputSearch bindsearchVal="handleSearchVal" holderText="請輸入訂單名稱"></InputSearch>
</view>
注意：bindsearchVal 去除掉bind，searchVal 和組件.js中的this.triggerEvent("searchVal")對應
調用頁面.js
/**
* 查詢按鈕觸發(fā)函數
* @param {參數} e
*/
handleSearchVal(e) {
getApp().preventActive(() => {
const orderName = e.detail;
this.setData({
page: 1,
orderName: orderName,
contentList: []
});
this.orderList();
})
}
handelSearchVal(e)名稱和調用頁面.wxml 中的bindsearchVal=”handleSearchVal“ 對應克饶，否則找不到觸發(fā)函數
效果圖
image.png
