微信小程序实现顶部搜索框

2024-04-02 19:04:59 586人浏览八月长安

摘要

本文实例为大家分享了微信小程序实现顶部搜索框的具体代码，供大家参考，具体内容如下这是一个最简单的顶部搜索框，代码如下 wxml <view> <vie

本文实例为大家分享了微信小程序实现顶部搜索框的具体代码，供大家参考，具体内容如下

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

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: 14px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09BB07;
  white-space: nowrap;
}

Page({
  
  data: {
 
  },
  // 查询搜索的接口方法
  a: function () {
   
  }
})

那么最简单的学会了进阶版的呢？

这是一个复杂点的搜索框样式：初始搜索框无法编辑和输入，点击搜索框使搜索框进入可编辑状态（在同一个页面完成），在搜索框内填入要搜索的内容

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>
                <!-- 可编辑时的搜索框 -->
                <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                    <icon class="weui-icon-search" type="search" size="14"></icon>
                    <view class="weui-search-bar__text">搜索</view>
                </label>
            </view>
            <!-- 取消搜索 -->
            <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</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 {
  margin-right: 4px;
  font-size: inherit;
}
.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__text {
  display: inline-block;
  font-size: 16px;
}
.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: 14px;
}
.weui-search-bar__label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: 3px;
  text-align: center;
  color: #9B9B9B;
  background: #FFFFFF;
  line-height: 28px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09BB07;
  white-space: nowrap;
}

Page({
  // 页面的初始数据
  data: {
    inputShowed: false,  //初始文本框不显示内容
  },
  // 使文本框进入可编辑状态
  showInput: function () {
    this.setData({
      inputShowed: true   //设置文本框可以输入内容
    });
  },
  // 取消搜索
  hideInput: function () {
    this.setData({
      inputShowed: false
    });
  }
});

进阶版的也完成了，最后，我想到了京东的点击搜索跳转一个页面，然后才可以编辑

主页代码如下

wxml

<view class='page_row' bindtap="suo">
    <view class="search">
      <view class="df search_arr">
        <icon class="searchcion" size='16' type='search'></icon>
        <input class="sousuo" disabled placeholder="搜索" bindtap='search'/>
      </view>
    </view>
</view>

wxss

.search{
  width: 98%;
}
.search_arr {
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
  margin-left: 20rpx;
}
.search_arr input{
  margin-left: 60rpx;
  height: 60rpx;
  border-radius: 5px;
}
.sousuo {
  padding-left: 38%;
  width: 15%;
  line-height: 150%;
  text-align: center;
}
.page_row{
  display: flex;
  flex-direction: row
}
.searchcion {
  margin: 10rpx 10rpx 10rpx 10rpx;
  position: absolute;
  margin-left:38%;
  z-index: 2;
  width: 15px;
  height: 15px;
  text-align: center;
 }

Page({
  
  data: {
 
  },
  // 跳转到搜索页面
  search: function () {
    wx.navigateTo({
      url: '../search/search'
    })
  }
})

搜索页面基础代码如下：

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='hideInput'>取消</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: 14px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09BB07;
  white-space: nowrap;
}

Page({
  
  data: {
  
  },
  // 取消搜索,返回主页面
  hideInput: function () {
wx.navigateTo({
//跳转，返回主页面路径
      url: '../log1/log1'   
    })
  }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 微信小程序实现顶部搜索框

本文链接: https://www.lsjlt.com/news/149381.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

微信小程序实现顶部搜索框

本文实例为大家分享了微信小程序实现顶部搜索框的具体代码，供大家参考，具体内容如下这是一个最简单的顶部搜索框，代码如下 wxml <view> <vie...

99+

2024-04-02
微信小程序如何实现顶部搜索框

这篇文章主要介绍“微信小程序如何实现顶部搜索框”，在日常操作中，相信很多人在微信小程序如何实现顶部搜索框问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序如何实现顶部搜索框”的疑惑有所帮助！接下来，请跟...

99+

2023-06-30
微信小程序实现搜索框功能

本文实例为大家分享了微信小程序实现搜索框功能的具体代码，供大家参考，具体内容如下效果： wxml文件: <view class="search_input" > ...

99+

2024-04-02
微信小程序实现简单搜索框

本文实例为大家分享了微信小程序实现简单搜索框的具体代码，供大家参考，具体内容如下 app.json { "pages":[ "pages/index/index" ]...

99+

2024-04-02
微信小程序怎么实现搜索输入框带搜索记录

本篇内容主要讲解“微信小程序怎么实现搜索输入框带搜索记录”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序怎么实现搜索输入框带搜索记录”吧!　　在最近的项目里有一个需求，就是需要一个带搜索...

99+

2023-06-26
Android顶部搜索框怎么实现

要实现Android顶部搜索框，可以使用Toolbar和SearchView组件。首先，在你的布局文件中添加一个Toolbar组件...

99+

2023-10-26

android
Android如何实现顶部搜索框

这篇文章给大家分享的是有关Android如何实现顶部搜索框的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。本文介绍两种SearchView的使用情况，一种是输入框和搜索结果不在一个activity中，另一种是在一个...

99+

2023-05-30

android
微信小程序中怎么实现一个搜索框组件

今天就跟大家聊聊有关微信小程序中怎么实现一个搜索框组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。search.wxml<view ...

99+

2024-04-02
微信小程序如何实现搜索功能

这篇文章给大家分享的是有关微信小程序如何实现搜索功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。开发需求微信小程序已经是非常火了，而且学习也比较容易，但是对于初学者来说还是一件...

99+

2024-04-02
微信小程序实现简单搜索功能

本文实例为大家分享了微信小程序实现简单搜索功能的具体代码，供大家参考，具体内容如下搜索效果图实现功能如下 (1) 未找到商品时显示提示信息，找到商品时显示商品列表 (2) 清空...

99+

2024-04-02
使用微信小程序实现搜索框自动补全功能

使用微信小程序实现搜索框自动补全功能随着移动互联网的发展，微信小程序成为了人们生活中不可或缺的一部分。在小程序中，搜索功能是非常常见的需求之一。为了提升用户体验，搜索框的自动补全功能是一个很好的加分项。本文将介绍如何使用微信小程序实现搜索...

99+

2023-11-21

搜索框微信小程序自动补全功能
微信小程序实现一键回到顶部功能

做微信小程序的时候遇到了这个问题要求列表页要做一个实现上拉一定距离后显示一键返回顶部的点击可以一下子回到列表顶部。遇到问题不要慌面向百度编程 ----上代码 .wxml文件代码...

99+

2024-04-02
微信小程序云开发实现搜索功能

微信小程序云开发实现搜索功能，供大家参考，具体内容如下微信小程序使用云开发实现搜索功能有两种情况，一种是简单的搜索用关键字来查询数据，另一种是模糊查询关于关键字的全部数据查询。废话...

99+

2024-04-02
微信小程序中的搜索功能怎么实现

微信小程序中的搜索功能可以通过以下步骤实现：在小程序的页面中添加一个搜索框组件（如或），用户可以在这个搜索框中输入关键字。 ...

99+

2024-04-09

微信小程序
微信小程序实现搜索功能并跳转搜索结果页面

搜索页面： search.wxml页面： <view class="form"> <input class="searchInput" va...

99+

2024-04-02
微信小程序实现吸顶盒效果

本文实例为大家分享了微信小程序实现吸顶盒效果的具体代码，供大家参考，具体内容如下 html部分  <view class="pa...

99+

2024-04-02
微信小程序怎么自定义顶部

要自定义微信小程序的顶部，可以使用微信小程序提供的导航栏组件和自定义组件来实现。以下是一种自定义顶部的方法：1. 在小程序的根目录下...

99+

2023-08-15

微信小程序
微信小程序返回到顶部功能的简单实现

目录业务需求页面结构样式实现逻辑总结业务需求今天公司的PM给我提了个需求，微信小程序需要做一个返回顶部的功能，返回顶部的按钮也是需要滑动到页面指定内容显示过后才出现的，微信小程序中...

99+

2022-11-21

微信小程序返回到顶部怎么设置微信小程序返回到顶部怎么弄微信小程序返回到顶部
如何实现微信小程序页面返回顶部效果

这篇文章主要为大家展示了“如何实现微信小程序页面返回顶部效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现微信小程序页面返回顶部效果”这篇文章吧。效果预...

99+

2024-04-02
微信小程序怎么实现一键回到顶部功能

这篇“微信小程序怎么实现一键回到顶部功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么实现一键回到顶部功能”文...

99+

2023-07-02