微信小程序组件 —— 带搜索功能的选择器

效果

组件 search-picker 文件

wxml 文件：

<view class="search-picker"><inputclass="picker-item-input"placeholder="请输入关键字"value="{{pickerValue}}"bindinput="input"/><pickerclass="picker-box"mode="selector"range="{{dataArray}}"range-key="title"value="index"bindchange="change"><view class="picker-icon cuIcon-unfold" /></picker>
</view>

wxss 文件：

注：/colorui/icon.wxss 文件来自 ColorUI 。

@import "/colorui/icon.wxss";.search-picker {margin-left: 30rpx;background: #f8f8f8;border-radius: 40rpx;font-size: 14px;line-height: 80rpx;padding-left: 30rpx;display: flex;
}.search-picker .picker-item-input {margin-left: 10rpx;width: 85%;height: 100%;line-height: 60rpx;font-size: 14px;
}.search-picker .picker-box {width: 15%;height: 100%;justify-content: flex-end;
}.search-picker .picker-box .picker-icon {margin-right: 35px;width: 100%;height: 72rpx;
}

js 文件：

Component({data: {pickerValue: ''},properties: {dataArray: {type: Array,value: []}},methods: {input(e) {const value = e.detail.value;this.setData({pickerValue: value});this.triggerEvent('inputEvent', value);},change(e) {const index = e.detail.value;const data = this.properties.dataArray[index];this.setData({pickerValue: data.title});this.triggerEvent('changeEvent', data.id);}}
})

使用

wxml 文件：

<search-pickerdataArray="{{pickerData}}"bind:inputEvent="inputEvent"bind:changeEvent="changeEvent"
/>

js 文件：

Page({data: {pickerData: [{id: 1,title: '河零'},{id: 2,title: '奥斯丁'}],},async inputEvent(e) {// const key = e.detail// 搜索代码...// ...this.setData({pickerData: this.data.pickerData})},changeEvent(e) {// 业务代码...},
})

参考：https://blog.csdn.net/cwin8951/article/details/116160189

微信小程序组件 —— 带搜索功能的选择器相关推荐

微信小程序最全搜索功能
微信小程序最全搜索功能主要功能: 搜索点击x号清空输入框内容点击取消返回上一页面搜索数据为空提示历史记录清空历史记录点击历史记录搜索点击搜索列表带参数返回上一页面代码如下: < ...
微信小程序实现历史搜索功能（h5同理）
1.实现效果 2.实现原理将数据存在storage中. wx.setStorageSync('search_history', JSON.stringify(this.data.list)) 取数组 ...
微信小程序开发实现搜索功能
对于搜索都是会有一些需要的,所以搜索页面还是可以复用的.主页面就是下面这样: 这个页面在pages/components/component2/component2.wxml 点击页面中黄色的inp ...
微信小程序如何实现搜索功能
思路: 1.先对input框绑定个search方法进行搜索 2.在js中写sarch方法,利用wx.request查找数据,success成功之后开始查找自己要的数据. 3.根据input框的输入值且 ...
微信小程序使用键盘搜索功能
记录下. 1.name='search';//search内容随便写 2.bindconfirm='shop_search_function'://这个变量是js函数 3.confirm-type=' ...
微信小程序组件(标签)—码虫带你飞
微信小程序组件(标签) 组件文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 常用布局标签 <view></view&g ...
安卓自定义时间选择器_微信小程序拾色器（颜色选择器）组件
点击上方"极客小寨",选择"置顶公众号" 第一时间关注程序猿(媛)身边的故事大家好,我是独立开发者东东,如今在web项目中不少地方需要用到颜色选择器,比如设置 ...
微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...

微信小程序组件 —— 带搜索功能的选择器

微信小程序组件 —— 带搜索功能的选择器

效果

组件 search-picker 文件

使用

微信小程序组件 —— 带搜索功能的选择器相关推荐

最新文章

热门文章