首页搜索框

3.1在components中新建文件夹searchinput

点击searchinput右键点击创建新的component,输入名字serchinput即可自动完

 

 

成四种文件的创建

在首页中引入文件：

1。新增组件

1. 声明引用（哪个页面文件要用组件，就在哪个页面文件的json文件中进行声明）

打开index.json输入  "searchinput" :"../../components/searchinput/searchinput"

1. 效果

{

  "usingComponents": {

    "searchinput" :"../../components/searchinput/searchinput"//输入这一行../为相对路径（右键复制searchinput的相对路径）

  },

  "navigationBarTitleText": "网上购物商店"

}

1. 打开index.wxml,里面的内容全部删除，换成

<view>

<!--搜索框 开始 -->

<searchinput></searchinput>

<!--搜索框 开始 -->

</view>

可以观察到首页已经跳转到输入的目的文件的内容了

 

 

 

5.在searchinput.wxml中输入，就会有搜索的超链接了

<view class="search_input">

<navigator>

搜索

</navigator>

</view>

 

 

 5.改searchinput.wxss为searchinput.less

6.添加

.search_input {

  height: 90rpx;

  padding: 10rpx;

  

}

.search_input navigator {

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #fff;

  border-radius: 15rpx;

 color: #666;

}

 6.在Visual Studio Code中输入如上内容，系统会自动生成searchinput.wxss文件