小程序--搜索页面(有搜索历史记录)

最新推荐文章于 2023-06-17 08:30:00 发布

gyuei

最新推荐文章于 2023-06-17 08:30:00 发布

阅读量2.1k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/gyueh/article/details/102758205

版权

实现如图所示的效果
在这里插入图片描述
1.xml部分代码如下

<view class="weui-search-bar">
  <view class="weui-search-bar__form">
      <view class="weui-search-bar__box">
        <icon class="weui-icon-search_in-box" type="search" size="17" color="#0C98C5"></icon>
        <input type="text" name='containerNo' value="{
  {containerNo}}" bindconfirm='searchAction'  class="weui-search-bar__input" placeholder="输入申请编号、箱号查询"  placeholder-style="color:#2EA7E0;font-size:26rpx;" focus="{
  {true}}" bindblur="searchBlur"/>
        <view class="weui-icon-clear" wx:if="{
  {containerNo.length > 0}}" bindtap="clearInput" >
            <icon type="clear" size="17" color="#0C98C5"></icon>
        </view>
      </view>
  </view>
  <view class="weui-search-bar__cancel-btn fonsize"  bindtap="clearInput">取消</view>
</view>
<view class="topbottom"></view>

<view class=&#