将搜索条独立成组件

project.config.json

@@ -1,7 +1,7 @@
 {
 	"description": "A WePY project",
 	"setting": {
-		"urlCheck": true,
+		"urlCheck": false,
 		"es6": false,
 		"postcss": false,
 		"minified": false,

src/components/z-search-bar.wpy

@@ -0,0 +1,55 @@
+<!--顶部搜索条-->
+<style lang="less">
+  @import "../style/search.less";
+</style>
+<template>
+  <view class="z-search-bar">
+    <view class="z-search-bar__form">
+      <view class="z-search-bar__box" hidden="{{!inputShowed}}">
+        <icon class="z-icon-search_in-box" type="search" size="14"></icon>
+        <input type="text" class="z-search-bar__input" confirm-type="search" placeholder="" @input="inputChange" value="{{inputVal}}" focus="{{inputShowed}}" @confirm="endInput" />
+        <view class="z-icon-clear" @tap="clearInput">
+          <icon type="clear" size="14"></icon>
+        </view>
+      </view>
+      <view class="z-search-bar__box" hidden="{{inputShowed}}">
+        <label class="z-search-bar__label"  @tap="showInput">
+          <icon class="z-icon-search" type="search" size="14"></icon>
+          <view class="z-search-bar__text">输入游戏名</view>
+        </label>
+      </view>
+    </view>
+    <view class="z-search-bar__cancel-btn" hidden="{{!inputShowed}}" @tap="hideInput">取消</view>
+  </view>
+</template>
+<script>
+  import wepy from 'wepy'
+
+  export default class zSearchBar extends wepy.component {
+    props = {
+    }
+    data = {
+      inputShowed: false,
+      inputVal: '',
+    }
+    methods = {
+      showInput () {
+        this.inputShowed = true;
+      },
+      hideInput () {
+        this.inputVal = '';
+        this.inputShowed = false;
+      },
+      inputChange(e) {
+        this.inputVal = e.detail.value;
+      },
+      clearInput () {
+        this.inputVal = '';
+      },
+      endInput (e) {
+        this.inputVal = e.detail.value;
+        this.$emit('endInput', this.inputVal);
+      },
+    }
+  }
+</script>

src/pages/search.wpy

@@ -1,6 +1,6 @@
 <style lang="less">
   @import "../style/index.wxss";
-  @import "../style/search.less";
+
   .container {
     background-color:#FFFFFF;
   }
@@ -14,24 +14,7 @@
 <template>
   <view class="container">
     <view class="top-action-bar">
-      <view class="weui-search-bar">
+      <zSearchBar @endInput.user="endInput" ></zSearchBar>
-        <view class="weui-search-bar__form">
-          <view class="weui-search-bar__box" hidden="{{!inputShowed}}">
-            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
-            <input type="text" class="weui-search-bar__input" confirm-type="search" placeholder="" value="{{inputVal}}" focus="{{inputShowed}}" bindconfirm="endInput" />
-            <view class="weui-icon-clear" hidden="{{inputVal.length === 0}}" bindtap="clearInput">
-              <icon type="clear" size="14"></icon>
-            </view>
-          </view>
-          <view class="weui-search-bar__box" hidden="{{inputShowed}}">
-            <label class="weui-search-bar__label"  bindtap="showInput">
-              <icon class="weui-icon-search" type="search" size="14"></icon>
-              <view class="weui-search-bar__text">输入游戏名</view>
-            </label>
-          </view>
-        </view>
-        <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
-      </view>
       <view class="filter-bar">
         <view class="search-btn">
           <picker @change="categoryChange" value="{{category}}" range="{{categoryArr}}">
@@ -76,6 +59,7 @@
   import gridCell from '../components/grid-cell';
   import recentGame from '../components/recent-game';
   import zanLoadmore from '../components/zan-loadmore';
+  import zSearchBar from '../components/z-search-bar';
   import global from '../common/global';
   import jcEvent from '../common/jc-event';
 
@@ -91,7 +75,8 @@
       recordCell: recordCell,
       gridCell: gridCell,
       recentGame: recentGame,
-      zanLoadmore: zanLoadmore
+      zanLoadmore: zanLoadmore,
+      zSearchBar: zSearchBar
     };
 
     data = {
@@ -101,7 +86,6 @@
       loading: false,
       noData: true,
       noMore: false,
-      inputShowed: false,
       inputVal: '',
       language: '所有语言',
       type: 0,
@@ -114,18 +98,8 @@
     };
 
     methods = {
-      showInput () {
+      endInput (val) {
-        this.inputShowed = true;
+        this.inputVal = val;
-      },
-      hideInput () {
-        this.inputVal = '';
-        this.inputShowed = false;
-      },
-      clearInput () {
-        this.inputVal = '';
-      },
-      endInput (e) {
-        this.inputVal = e.detail.value;
         this.initPageParam();
         this.getRecords();
       },

src/style/search.less

@@ -1,4 +1,4 @@
-@weuiSearchBarHeight: 28px;
+@zSearchBarHeight: 28px;
 .top-action-bar {
   display: flex;
   flex-direction: column;
@@ -14,7 +14,7 @@
   padding: 10rpx;
 }
 
-.weui-search-bar {
+.z-search-bar {
   position: relative;
   padding: 8px 10px;
   display: flex;
@@ -23,49 +23,48 @@
   border-top: 1rpx solid #D7D6DC;
   border-bottom: 1rpx solid #D7D6DC;
 }
-.weui-icon-search {
+.z-icon-search {
   margin-right: 8px;
   font-size:inherit;
 }
-.weui-icon-search_in-box {
+.z-icon-search_in-box {
   position: absolute;
   left: 10px;
   top: 7px;
 }
-.weui-search-bar__text{
+.z-search-bar__text{
   display: inline-block;
   font-size: 14px;
   vertical-align: middle;
 }
-.weui-search-bar__form {
+.z-search-bar__form {
   position: relative;
   flex: auto;
   border-radius: 5px;
   background: #FFFFFF;
   border: 1rpx solid #E6E6EA;
 }
-.weui-search-bar__box {
+.z-search-bar__box {
   position: relative;
   padding-left: 30px;
   padding-right: 30px;
   width: 100%;
   box-sizing: border-box;
   z-index: 1;
-  height: @weuiSearchBarHeight;
+  height: @zSearchBarHeight;
 }
-.weui-search-bar__input {
+.z-search-bar__input {
-  height: @weuiSearchBarHeight;
+  height: @zSearchBarHeight;
-  line-height: @weuiSearchBarHeight;
+  line-height: @zSearchBarHeight;
   font-size: 14px;
 }
-.weui-icon-clear {
+.z-icon-clear {
   position: absolute;
   top: 0;
   right: 0;
-  padding: 7px 8px;
+  padding: 0 8px;
-  font-size: 0;
 }
-.weui-search-bar__label {
+.z-search-bar__label {
   position: absolute;
   top: 0;
   right: 0;
@@ -76,12 +75,12 @@
   text-align: center;
   color: #9B9B9B;
   background: #FFFFFF;
-  line-height: @weuiSearchBarHeight;
+  line-height: @zSearchBarHeight;
   height: 28px;
 }
-.weui-search-bar__cancel-btn {
+.z-search-bar__cancel-btn {
   margin-left: 10px;
-  line-height: @weuiSearchBarHeight;
+  line-height: @zSearchBarHeight;
   color: #09BB07;
   white-space: nowrap;
 }