樣式集（四）搜索框樣式

上圖：

代碼：

// pages/search/search.js
var text=''
 
Page({
  data: {
    input_val:"",
    list:[]
  },
  input_p(e){
    this.setData({
      input_val:e.detail.value
    })
  },
  onLoad: function (options) {
  },
})

  <view class='page_row' bindtap="suo">
  	<view class="search">
  		<view class="df search_arr">
  			<icon class="searchcion" size='20' type='search'></icon>
  			<input class="" bindinput="input_p" placeholder="請輸入關鍵字" value="{{searchValue}}" />
  		</view>
  	</view>
  	<view class='sousuo' catchtap="see">搜索</view>
  </view>

  <block wx:if='{{list}}' wx:for='{{list}}' wx:key=''>
  	<view class="item">名字：{{item.name}}</view>
  </block>

.search{
  width: 80%;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}
.search_arr {
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
  margin-left: 20rpx;
}
.search_arr input{
  margin-left: 70rpx;
  height: 70rpx;
  border-radius: 5px;
}
 
.sousuo {
  margin-left: 15rpx;
  width: 15%;
  height: 70rpx;
  margin-top: 10rpx;
  line-height: 70rpx;
  text-align: center;
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
  
}
.page_row{
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #d0d0d0;
}
.item{
  margin-left:20rpx;
  line-height: 70rpx;
  height: 70rpx;
  
}
.searchcion {
  margin: 15rpx 10rpx 10rpx 10rpx;
  position: absolute;
  left:25rpx;
  z-index: 2;
  width: 20px;
  height: 20px;
  text-align: center;
}
.title{
  margin-top: 100rpx;
  margin-left: 30rpx;
}