修改搜索

app.wxss

 /**app.wxss**/
-
+page{
+  background: #f5f5f5;
+}
 .container {
   height: 100%;
   display: flex;

components/search-filter/index.js

+// components/search-filter/index.js
+import api from '../../utils/Api.js'
+const app = getApp()
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+  /**
+   * 组件的初始数据
+   */
+  ready(){
+    api.home.banner({token:app.globalData.token}).then(res=>{
+      console.log(res)
+    })
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    firstTap: function (){
+      var myEventDetail = {test:"helloworld"} // detail对象，提供给事件监听函数
+      var myEventOption = {} // 触发事件的选项
+      this.triggerEvent('change', myEventDetail, myEventOption)
+    }
+  }
+})

components/search-filter/index.json

+{
+  "component": true,
+  "usingComponents": {
+    "i-row": "/iview/row/index",
+    "i-col": "/iview/col/index"
+  }
+}
\ No newline at end of file

components/search-filter/index.wxml

+<!--components/search-filter/index.wxml-->
+<i-row i-class='row-filter'>
+  <i-col span="6">
+    <view class="filter-item" bindtap='firstTap'>
+      <text class='active'>全部项目</text>
+      <image class="search-icon" src='/images/icon-down-select.png'></image>
+    </view>
+  </i-col>
+  <i-col span="6" i-class="col-class">
+    <view class="filter-item">
+      <text>分类</text>
+      <image class="search-icon" src='/images/icon-down-select.png'></image>
+    </view>
+  </i-col>
+  <i-col span="6" i-class="col-class">
+    <view class="filter-item">
+      <text>地域</text>
+      <image class="search-icon" src='/images/icon-down-select.png'></image>
+    </view>
+  </i-col>
+  <i-col span="6" i-class="col-class">
+    <view class="filter-item">
+      <text>标签</text>
+      <image class="search-icon" src='/images/icon-down-select.png'></image>
+    </view>
+  </i-col>
+</i-row>
+<view>
+</view>
\ No newline at end of file

components/search-filter/index.wxss

+/* components/search-filter/index.wxss */
+.row-filter{
+  padding: 36rpx 0px;
+}
+.filter-item{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.filter-item > image{
+  width: 12rpx;
+  height: 10rpx;
+  margin-left: 12rpx;
+}
+.filter-item > text{
+  color: rgb(51, 51, 51);
+  font-size: 28rpx;
+}
+.filter-item > text.active{
+  color: rgb(43, 163, 215);
+}

pages/search/index.js

@@ -62,5 +62,9 @@ Page({
    */
   onShareAppMessage: function () {
 
+  },
+
+  filterChange: function (event){
+    console.log(event)
   }
 })
\ No newline at end of file

pages/search/index.json

 {
   "usingComponents": {
-    "i-row": "/iview/row/index",
-    "i-col": "/iview/col/index"
+    "search-filter": "/components/search-filter/index"
   }
 }
\ No newline at end of file

pages/search/index.wxml

 <!--pages/search/index.wxml-->
-<view class='search-wrapper'>
-  <image class="search-icon" src='/images/icon_search.png'></image>
-  <input class='search-input' placeholder='关键词如地名、游泳等'></input>
-</view>
-<i-row i-class='row-filter'>
-  <i-col span="6">
-    <view class="filter-item">
-      <text class='active'>全部项目</text>
-      <image class="search-icon" src='/images/icon-down-select.png'></image>
-    </view>
-  </i-col>
-  <i-col span="6" i-class="col-class">
-    <view class="filter-item">
-      <text>分类</text>
-      <image class="search-icon" src='/images/icon-down-select.png'></image>
-    </view>
-  </i-col>
-  <i-col span="6" i-class="col-class">
-    <view class="filter-item">
-      <text>地域</text>
-      <image class="search-icon" src='/images/icon-down-select.png'></image>
-    </view>
-  </i-col>
-  <i-col span="6" i-class="col-class">
-    <view class="filter-item">
-      <text>标签</text>
-      <image class="search-icon" src='/images/icon-down-select.png'></image>
-    </view>
-  </i-col>
-</i-row>
\ No newline at end of file
+<view class="header">
+  <view class='search-wrapper'>
+    <image class="search-icon" src='/images/icon_search.png'></image>
+    <view class='search-input'>关键词如地名、游泳等</view>
+  </view>
+  <search-filter bind:change="filterChange" />
+</view>
\ No newline at end of file

pages/search/index.wxss

 /* pages/search/index.wxss */
+.header{
+  background: white;
+}
 .search-wrapper{
   display: flex;
   justify-content: flex-start;
@@ -16,30 +19,9 @@
 }
 .search-input{
   font-size: 26rpx;
-  color: black;
+  color: rgb(153, 153, 153);
   padding-left: 10rpx;
 }
 .search-input:-moz-placeholder, .search-input:-ms-input-placeholder, .search-input::-webkit-input-placeholder{
   color: rgb(153, 153, 153);
 }
-.row-filter{
-  padding: 36rpx 0px;
-}
-.filter-item{
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.filter-item > image{
-  width: 12rpx;
-  height: 10rpx;
-  margin-left: 12rpx;
-}
-.filter-item > text{
-  color: rgb(51, 51, 51);
-  font-size: 28rpx;
-}
-.filter-item > text.active{
-  color: rgb(43, 163, 215);
-}
\ No newline at end of file

project.config.json

@@ -37,7 +37,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 0,
+			"current": 3,
 			"list": [
 				{
 					"id": 0,
@@ -56,6 +56,11 @@
 					"name": "下单",
 					"pathName": "pages/me/order/index",
 					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "搜索",
+					"pathName": "pages/search/index"
 				}
 			]
 		}