微信小程序下拉框搜索功能的实现方法

最近在做一个项目的时候，需要用到下拉框搜索，网上搜了半天没找到想要的，决心自己动手写一个。

首先看下效果图：

左边是输入框，可以进行模糊查询，右边图标进行选择。

代码部分，我定义了五个参数，和一个自定义的方法，

list:下拉框数组，

_width：组件宽度，
_height：组件高度，
bind:action: 自定义方法

考虑到每个人用的时候用的对象数组结构不同我预留了两个字段，做自定义(可不写)，怎么样是不是很强大。

actualvalue：下拉框实际值，
showvalue：下拉框显示值

代码我发布到github了代码地址：https://github.com/ZhuifengJuvenile/hui-picker-input

总结

以上所述是小编给大家介绍的微信小程序下拉框搜索功能的实现方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 微信小程序搜索组件wxSearch实例详解

    微信小程序搜索组件wxSearch实例详解

    wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

  • 微信小程序实现全局搜索代码高亮的示例

    需求 最近在做微信小程序的时候,需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果,目前的思路是,递归后台来返回的数据,并将对象的value值替换为需要的dom节点,并且通过rich-text来实现,高亮效果. 代码 wxml: <view class='homePage'> <input bindinput="bindKeyInput"></input> <view wx:for="{{newJson}}" wx:f

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

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

  • 微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">

  • 微信小程序select下拉框实现效果

    微信小程序select下拉框实现效果

    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>￥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap='bi

  • 微信小程序下拉框功能的实例代码

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

  • 微信小程序下拉框组件使用方法详解

    本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = region,以及value = "一维数组" //.wxml <picker mode="region" bindchange="bindViewEvent" data-model="component" data-me

  • 微信小程序下拉框搜索功能的实现方法

    微信小程序下拉框搜索功能的实现方法

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

  • 微信小程序下拉框组件使用方法

    小程序有时需要使用下拉框选项,通常我会使用 picker 组件实现.pick 组件使用 mode 来区分类别,默认使用普通选择器就行. 除了上述方式,我们也可以通过自定义组件实现,代码如下: //index.js Component({   /**    * 组件的属性列表    */   properties: {     propArray: {       type: Array,     }   },   /**    * 组件的初始数据    */   data: {     sele

  • 微信小程序下拉刷新界面的实现

    微信小程序下拉刷新界面的实现 利用onPullDownRefresh函数设置下拉刷新功能 一.在app.json中,将window选项中的enablePullDownRefresh设为true "window":{ "enablePullDownRefresh":true } 或者在要刷新的界面的XXX.json中设置enablePullDownRefresh设为true { "enablePullDownRefresh": true } 二.利

  • 微信小程序下拉刷新PullDownRefresh的使用方法

    微信小程序下拉刷新PullDownRefresh的使用方法

    前言 下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 onPullDownRefresh .虽然微信的官方文档有很多坑,但下拉刷新介绍的还是很全面的. 微信小程序--下拉刷新.jpg 最近开发一款微信小程序,里面有用到下拉刷新数据的功能.于是,又开始折腾了... 一.onPullDownRefresh回调 初略看了下文档,发现小程序js中有onPullDownRefresh回调,果断重写之... // http://itlao5.com onPullDownRe

  • 使用bootstrap实现下拉框搜索功能的实例讲解

    背景 公司的小二后台有一个下拉框选择经销商的功能,由于选择的经销商过多,因此添加搜索功能. 前提 配置好Bootstrap相关的开发环境 主要内容 <div class="form-group"> <label class="col-sm-3 control-label" for="state">经销商信息</label> <div class="col-sm-3"> <s

  • 微信小程序 下拉菜单的实现

    微信小程序 下拉菜单的实现

    微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

  • 微信小程序下拉菜单效果的实例代码

    微信小程序下拉菜单效果的实例代码

    //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te

随机推荐