【微信小程序】使⽤⾃定義組件實現頭部搜索框

使⽤⾃定義組件實現頭部搜索框

1. 創建自定義組件
在⽂件夾components/SearchInput內，右鍵新建Component名爲SearchInput

在組件的json⽂件中進⾏⾃定義組件聲明
components/SearchInput.json

{
  "component": true,
  "usingComponents": {}
}

在組件的wxml⽂件中編寫組件模板
components/SearchInput.wxml

<view class="search_input">
  <navigator url="/pages/search/index" open-type="navigate">搜索</navigator>
</view>

在組件的wxss⽂件中加⼊組件樣式
components/SearchInput.wxss

.search_input {
  height: 90rpx;
  padding: 10rpx;
  background-color: var(--themeColor);}
.search_input navigator {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 15rpx;
  color: #666;
}

2. 聲明引⼊⾃定義組件
在⻚⾯的json⽂件中進⾏引⽤聲明，提供對應的組件名和組件相對路徑
pages/index/index.json

{
  // 引用聲明
  "usingComponents": {
    // 組件名: 組件相對路徑
    "SearchInput": "../../components/SearchInput/SearchInput"
  },      
  "navigationBarTitleText": "商品分類"
}

3.⻚⾯中使⽤⾃定義組件
在頁面的wxml文件中使用自定義組件
pages/index/index.json

<view class="pyg_index">
  <!-- 搜索框開始 -->
  <SearchInput></SearchInput>
  <!-- 搜索框結束 -->
</view>