微信小程序--搜索框样式 及form提交实现

搜索框样式 及form提交实现

第一种风格

.js

bt_search(e){
    console.log('搜索',e)
  },

.wxml

<form bindsubmit="bt_search">
  	<view class="view_search">
  		<view class="view_icon_input">
  			<icon class="searchcion" size='15' type='search'></icon>
  			<!-- 注意：input必须要设置name，否则form提交时候会获取不到 -->
  			<input class="input_search" name='searchValue' placeholder="请输入姓名" value="{{searchValue}}" />
  		</view>
  		<view>
  			<button class='bt_sousuo' form-type="submit">搜索</button>
  		</view>
  	</view>
  </form>

.wxss

/* ****搜索**** begin*/


.view_search {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  align-items: center;
  justify-content: center;
}

.view_icon_input {
  /* border: 1px solid #d0d0d0; */
  border-radius: 50rpx;
  width: 85%;
  display: flex;
  flex-direction: row;
  background-color: #ebebeb;
}

.input_search {
  margin-left: 70rpx;
  height: 70rpx;
  width: 450rpx;
  /* margin-left: 10rpx; */
  /* border-radius: 10px; */
}

.bt_sousuo {
  /* 搜索按钮 */
  width: 150rpx;
  height: 70rpx;
  color: #ff4d4d;
  background-color: rgb(255, 241, 241);
  border-radius: 98rpx;
  font-size: 35rpx;
  margin: 0rpx 10rpx 0rpx 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

/* 搜索按钮-为了不出现按钮边框断线 */
.bt_sousuo::after {
  /* 圆角 */
  border-radius: 98rpx;
  /* 取消边框 */
  /* border: 0; */
}

.searchcion {
  /* 搜索图标 */
  margin: 15rpx 15rpx 15rpx 15rpx;
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  text-align: center;
}

/* ****搜索**** end*/

第二种风格

.wxml

<view class="view_search">
	<view class="view_icon_input">
		<icon class="searchcion" size='20' type='search'></icon>
		<input class="input_search" placeholder="请输入姓名、身份证号" value="{{searchValue}}" bindblur="input_search" />
		<view class='sousuo' bindtap="bt_search"><text style="color:#fff">搜索</text></view>
	</view>
</view>

.wxss

/* ****搜索**** begin*/
.view_search{
  width: 96%;
  display: flex;
  flex-direction: row;
  /* margin-top: 20rpx; */
  /* margin-bottom: 20rpx; */
  align-items: center;
  justify-content: center;
  padding: 2%;
}
.view_icon_input{
  /* border: 1px solid #d0d0d0; */ 
  width: 100%; 
  border-radius: 50rpx;
  display: flex;
  flex-direction: row;
  background-color: #ebebeb;
  align-items: center;
  /* justify-content: center; */
  
}
.input_search{
  margin-left: 70rpx;
  height: 70rpx;
  width: 100%;
  /* border-radius: 10px; */
}

.sousuo {
  margin-left: 30rpx;
  margin-right: 10rpx;
  width: 20%;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background-color: #41A5F5;
  /* border: 1px solid #d0d0d0; */
  border-radius: 50rpx;
  padding: 5rpx;
  font-size: small;

}
.searchcion {
  margin: 0rpx 15rpx 0rpx 15rpx;
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  text-align: center;
}

/* ****搜索**** end*/