[toc]

功能实现,需求先行。

本次任务,实现搜索自定义组件
image.png

自定义组件解读,请移步至:
http://liudongdong.top/archives/15%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6

1、创建组件页

在components文件夹下,创建SearchInput组件
image.png

2、编写自定义组件静态页

SearchInput.wxml

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

3、编写自定义组件样式

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;
}

4、申明我为组件

SearchInput.json

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

5、调用方调用组件

指定组件路径,并别名使用
pages/index/index.json

{
  "usingComponents": {
    "search-input":"/components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "优购首页"
}

6、调用方使用组件

<view>
  <search-input></search-input>
</view>

效果图:
image.png

image.png
image.png

Q.E.D.


只有创造,才是真正的享受,只有拚搏,才是充实的生活。