微信小程序顶部搜索框 (带源码 建议收藏)

这是一个最简单的顶部搜索框  代码如下

wxml

<view>
     <view>
        <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="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容"/>
                </view>
            </view>
            <!-- 搜索按钮,调用搜索查询方法 -->
            <view class="weui-search-bar__cancel-btn" bindtap='方法名a'>搜索</view>
        </view>
    </view>
</view>

wxss

.weui-search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #EFEFF4;
  border-top: 1rpx solid #D7D6DC;
  border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14p
  • 18
    点赞
  • 209
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序的picker选择框是一种常见的选择器组件,它允许用户通过下拉列表中的选项进行选择。一般情况下,picker选择框是根据预设的选项来展示选择内容,用户需要手动滚动浏览列表来找到所需选项。然而,有时候列表中的选项可能过多,或者用户需要快速定位到特定选项,这时就可以利用picker选择框的搜索功能。 当picker选择框有搜索功能时,用户可以在选择框上方的搜索框中输入关键词,系统会根据用户输入的关键词动态筛选显示对应的选项。这样,用户可以通过输入关键词来快速缩小选择范围,找到所需的选项,提高使用效率和用户体验。 在使用过程中,用户只需点击选择框,触发弹出列表的同时,即可使用搜索框。用户可以在搜索框内输入部分或者全部关键词,并随着输入逐步筛选出匹配的选项。选择框下方的选项列表会实时更新,只展示与搜索关键词相关的选项。用户可以通过滚动列表查看筛选结果,并选择所需的选项。 小程序开发者可以根据业务需求自定义搜索功能的实现方式。一种常见的实现方式是通过监听搜索框的输入事件,获取输入的关键词,然后通过筛选算法对原始选项列表进行过滤,筛选出与关键词匹配的选项,并动态更新列表显示。此外,还可以在搜索框的右侧添加清空按钮,方便用户清空输入并重新进行搜索。 总的来说,微信小程序的picker选择框有搜索功能可以提高用户的选择效率和交互体验,将大量选项进行快速筛选,使用户更方便地找到所需选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值