微信小程序的开发之搜索功能

就直接贴代码啦~

wxml

<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="请输入搜索内容" value="{{wxSearchData}}" bindinput="wxSearchInput" bindconfirm="wxSearchConfirm" /><view class="weui-icon-clear" wx:if="{{wxSearchData.value.length > 0}}" bindtap="wxSearchClear"><icon type="clear" size="14"></icon></view></view></view><view class="weui-search-bar__cancel-btn" bindtap="back"><text data-key='back'>返回</text></view>
</view>

js


/*** 页面的初始数据*/data: {lists: [],              // 接收搜索的内容wxSearchData: '',       // 输入的值},
/*** 搜索*/wxSearchInput: function (value) {var that = this;if (value.detail.value.length > 0) {wx.request({url: '',data: {value: value.detail.value},header: { 'content-type': 'application/x-www-form-urlencoded' },method: 'POST',dataType: json,responseType: text,success: function (res) {if (res.code) {var data = that.data.lists;for (let i = 0; i < res.data.length; i++) {data.push(res.data[i]);}that.setData({wxSearchData: value.detail.value,lists: data})}},fail: function (res) { },complete: function (res) { },})}},/*** 监听软键盘确认键*/wxSearchConfirm: function (e) {},/*** 返回*/back: function (e) {wx:wx.navigateBack({delta: 1,})}

微信小程序的开发之搜索功能相关推荐

怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
微信小程序云开发实现退款功能
微信小程序云开发实现退款功能官方文档小程序云开发实现微信支付官方文档非常的简单,也没有示例代码,只是列出了许多需要的参数,对于新手来说会可能有点迷糊.可以我的步骤跟着一步一步来. 一.获取退款A ...
微信小程序前端备忘录记事本搜索功能
微信小程序搜索功能,小程序自带weui, 阅读文档,WeUI组件库简介 | 微信开放文档 (qq.com) 1推荐使用方法: 在//app.json中录下下列句子 "useExtendedL ...
微信小程序中用键盘的搜索功能进行页面跳转
我们都知道,小程序中页面跳转是必不可少的,一边都是绑定事件bindtap,在js中写所跳转的路径即可,那么如何在搜索框里面点击手机键盘上的搜索功能,去进行页面跳转呢?这就用到了一个input中的一个事 ...
小程序云开发实现搜索功能
云开发数据库的模糊搜索,根据记录的字段字符串模糊搜索实现. 代码: 先在app.js初始化: //app.js App({onLaunch: function () {wx.cloud.init({e ...
微信小程序豆瓣评分实现搜索功能
components下创建自定义搜索组件searchbar 在page中的search.json文件夹中引用定义搜索api 在自定义searchbar组件js中编写 - 在使用组件的时候, 当前使用 ...
【第三篇】微信小程序云开发项目总结
上篇文章:[第二篇]微信小程序云开发项目总结功能点2:答疑解惑这个功能点的实现基本与用户填写简历相同,都是用户上传数据到数据库,不加说明. 功能点3:消息回复这个板块是用户查看管理员的回复消息的 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...

微信小程序的开发之搜索功能

wxml

js

微信小程序的开发之搜索功能相关推荐

最新文章

热门文章