微信小程序实现搜索框功能

2024-07-28 14:05:42

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

效果：

wxml文件:

<view class="search_input" >
        <navigator url="/pages/search/search" open-type="navigate" class="navigator">
       <text class="iconfont icon-guanbi"></text> 搜索
        </navigator>
</view>

text中需要导入图标样式，这里利用的是iconfont
url是要跳转的页面

.search_input {
  height: 90rpx;
  background-color: #eb4450;
  padding: 10rpx;
}
.search_input .navigator{
  background-color: #fff;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15rpx;
  color: #999;
  font-size: 32rpx;
}

.js中：

如果是组件引用全局样式，需要加如下属性

options:{
      addGlobalClass:true,
  },

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

微信小程序实现搜索框功能及踩过的坑

先上代码: wxml:  <view class="inputcontainer"> <view class="input" catchtap="inputSwitchStatus" wx:if="{{!edit}}">搜索商品</view> <view class="edit" wx:else> <form bi
微信小程序仿淘宝热搜词在搜索框中轮播功能

摘要逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率.就在小程序中试着实现实现. 效果体验实现思路思路比较简单,主要是两点, 1:input处于热搜提示词上层,用z-index实现 2:热搜词轮播用swiper实现,方向为vertical 3:在input聚焦时获取swiper当前值,设置为placeholder 4:将swiper隐藏代码已封装成组件组件代码: wxs
微信小程序搜索框组件代码实例

这篇文章主要介绍了微信小程序搜索框组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon>
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view class="df search_arr"> <icon class="searchcion" size='20' type='search'></icon>
微信小程序实现搜索框功能

本文实例为大家分享了微信小程序实现搜索框功能的具体代码,供大家参考,具体内容如下效果: wxml文件: <view class="search_input" > <navigator url="/pages/search/search" open-type="navigate" class="navigator"> <text class="iconfont icon-guanbi&q
微信小程序下拉框功能的实例代码

微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view>  <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do
小程序实现搜索框功能

本文实例为大家分享了小程序实现搜索框功能的具体代码,供大家参考,具体内容如下实现效果图: xxx.wxml  <view class="weui-search-bar"> <view class="weui-search-bar__form">  <view class="weui-search-bar__box"> &l
微信小程序之搜索分页功能的实现代码

直接上代码: wxml: <wxs src="../wxs/changeimg.wxs" module="changeimg" /> <view class="container"> <view class="search_input"> <image class="back" src="" mode="widthFix"&g
微信小程序实现搜索历史功能

结合了微信给的资料,马马虎虎摸索出了一些东西,下面说下一下微信小程里序搜索历史功能的实现,下图是实现效果. 首先,定义历史记录的显示风格和方式,在下用的是列表模式,没有使用什么比较酷炫的套路. <view wx:for="{{sercherStorage}}" wx:key="item.id"> <view class="liclass" style="color:#9E9E9E;border-bottom:0;fon
微信小程序下拉框搜索功能的实现方法

最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个. 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择. 代码部分,我定义了五个参数,和一个自定义的方法, list:下拉框数组, _width:组件宽度, _height:组件高度, bind:action: 自定义方法考虑到每个人用的时候用的对象数组结构不同我预留了两个字段,做自定义(可不写),怎么样是不是很强大. actualvalue:下拉框实际值, showvalue:下拉框显示值
微信小程序首页的分类功能和搜索功能的实现思路及代码详解

就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击分类导航时,会触发这个方法,并传回当前点击
微信小程序实现搜索功能并跳转搜索结果页面

本文实例为大家分享了微信小程序实现搜索功能,并跳转搜索结果页面,供大家参考,具体内容如下搜索页面: search.wxml页面: <view class="form"> <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="请输入搜索关键字" type="text" /> </view
微信小程序复选框实现多选一功能过程解析

这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下功能实现界面 data: { checkboxItems: [ { name: '全天(1-8节)', value: 'allday' }, { name: '上午(1-4节)', value: 'am' }, { name: '下午(5-8节)', value: 'pm' }, { name: '晚上(晚自习)', value: 'nigh

微信小程序实现搜索框功能

相关推荐

随机推荐