微信小程序微信小程序 搜索框组件代码实例搜索框组件代码实例
主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一
定的参考学习价值,需要的朋友可以参考下
这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的
参考学习价值,需要的朋友可以参考下
代码如下
search.wxml
<view class="header">
<view class="search">
<icon type="search" size="18" color="">
</icon>
<input type="text" confirm-type="search" bindconfirm="onConfirm" value="{{value}}" />
<icon type="clear" size="18" bind:tap="onToggle" />
</view>
<button bind:tap="onCancel" plain="{{true}}" class="cancel">取消</button>
</view>
<view class="container" wx:if="{{!isSearch}}">
<view class="title">
<view class="line"></view>
<text>历史搜索</text>
</view>
<view class="history-container">
<block wx:for="{{words}}" wx:key="{{index}}">
<v-tag content="{{item}}" bind:comment="onConfirm"></v-tag>
</block>
</view>
<view class="title">
<view class="line"></view>
<text>热门搜索</text>
</view>
<view class="history-container">
<block wx:for="{{hots}}" wx:key="{{index}}">
<v-tag content="{{item}}" bind:comment="onConfirm"></v-tag>
</block>
</view>
</view>
<view class="result" wx:if="{{isSearch}}" >
<block wx:for="{{books}}" wx:key="index">
<v-book book="{{item}}"></v-book>
</block>
</view>
search.wxss
.header{
position: fixed;
top:0;
left: 0;
z-index: 300;
height:100rpx;
display: flex;
padding-left:20rpx;
padding-right:20rpx;
align-items: center;
border-top: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
flex-direction: row;
background: #fff;
}
.search{
width:530rpx;
height:70rpx;
background: rgb(245, 245, 245);
border-radius:30rpx;
padding-left: 20rpx;
display: flex;
align-items: center;
}
.search input{
flex:1;
margin-left: 20rpx;
}
评论0