'增加组件'

app.wxss

@@ -47,19 +47,16 @@
 }
 
 /* 搜索框 */
-.search{
+/* .search{
     width: 90%;
     margin: 0rpx auto;
     height: 35rpx;
-    /* border: 1rpx solid #cdcdcd; */
     border-radius: 10rpx;
     font-size: 25rpx;
     padding: 10rpx 0rpx;
     display: flex;
     justify-content: start;
     background-color: rgb(240, 240, 240);
-    /* margin-top: 20rpx;
-    margin-bottom: 20rpx; */
   }
   .search-box{
     width: 95%;
@@ -77,8 +74,7 @@
     position: relative;
     top: -5rpx;
     left: 10rpx;
-    /* background-color: red */
-  }
+  } */
 
   /* 公共类 */
 .marginTopBottom{

component/search/search.js

@@ -0,0 +1,31 @@
+//Component Object
+Component({
+    properties: {
+        myProperty:{
+            type:String,
+            value:'',
+            observer: function(){}
+        },
+    },
+    data: {
+
+    },
+    methods: {
+        
+    },
+    created: function(){
+
+    },
+    attached: function(){
+
+    },
+    ready: function(){
+
+    },
+    moved: function(){
+
+    },
+    detached: function(){
+
+    },
+});

component/search/search.json

@@ -0,0 +1,3 @@
+{
+    "component":true
+}

component/search/search.wxml

@@ -0,0 +1,4 @@
+<view class="search marginTopBottom">
+  <view class="icon-search"></view>
+  <input placeholder="搜索你想听的节目"></input>
+</view>

component/search/search.wxss

@@ -0,0 +1,33 @@
+/* 搜索框 */
+.search{
+    width: 90%;
+    margin: 0rpx auto;
+    height: 35rpx;
+    /* border: 1rpx solid #cdcdcd; */
+    border-radius: 10rpx;
+    font-size: 25rpx;
+    padding: 10rpx 0rpx;
+    display: flex;
+    justify-content: start;
+    background-color: rgb(240, 240, 240);
+    /* margin-top: 20rpx; */
+    margin-bottom: 20rpx;
+  }
+  .search-box{
+    width: 95%;
+    height: 25rpx;
+    margin-left: 10rpx;
+  }
+  .icon-search{
+    margin-left: 20rpx;
+    line-height: 35rpx;
+  }
+  .search>input{
+    width: 90%;
+    height: 25rpx;
+    font-size: 25rpx;
+    position: relative;
+    top: -5rpx;
+    left: 10rpx;
+    /* background-color: red */
+  }

pages/classification/classification.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "search":"/component/search/search"
+  }
 }

pages/classification/classification.wxml

@@ -1,9 +1,6 @@
 <!--pages/classification/classification.wxml-->
 <!-- 搜索框 -->
-<view class="search marginTopBottom">
-  <view class="icon-search"></view>
-  <input placeholder="搜索你想听的节目"></input>
-</view>
+<search></search>
 
 <!-- 分类索引 -->
 <view class="ification">

pages/collection/collection.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "search":"/component/search/search"
+  }
 }

pages/collection/collection.wxml

@@ -19,10 +19,7 @@
 </block>
 <block wx:else>
     <!-- 搜索框 -->
-    <view class="search marginTopBottom">
-        <view class="icon-search"></view>
-        <input placeholder="搜索你想听的节目"></input>
-    </view>
+    <search></search>
     <view class="titleBar">
       <view class="itemTitle {{index == currentIndex ? 'active' : ' '}}" 
         data-index="{{index}}" bindtap="checkItem" wx:for="{{content}}" wx:key="index">

pages/index/index.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "search":"/component/search/search"
+  }
 }

pages/index/index.wxml

@@ -1,9 +1,10 @@
 <!-- index.wxml -->
 <!-- 搜索框 -->
-<view class="search marginTopBottom">
+<!-- <view class="search marginTopBottom">
   <view class="icon-search"></view>
   <input placeholder="搜索你想听的节目"></input>
-</view>
+</view> -->
+<search></search>
 <!-- 轮播图 -->
 <view class="swiper-container">
   <swiper class="swiper" autoplay="true" circular="true"