微信小程序优雅的搜索框
支持自定义热门key
支持搜索历史
支持搜索建议
支持搜索历史(记录)缓存使用
* 引入
// 模版引入
<import src="/wxSearch/wxSearch.wxml"/>
<template is="wxSearch" data="{{wxSearchData}}"/>
// wxss中引入
@import "/wxSearch/wxSearch.wxss";
* 使用
//wxSearch 暴漏的接口
module.exports = {
init: init,
initColor: initColors,
initMindKeys: initMindKeys,
wxSearchInput: wxSearchInput,
wxSearchFocus: wxSearchFocus,
wxSearchBlur: wxSearchBlur,
wxSearchKeyTap: wxSearchKeyTap,
wxSearchAddHisKey:wxSearchAddHisKey,
wxSearchDeleteKey:wxSearchDeleteKey,
wxSearchDeleteAll:wxSearchDeleteAll,
wxSearchHiddenPancel:wxSearchHiddenPancel
}
//初始化
onLoad: function () {
console.log('onLoad')
var that = this
//初始化的时候渲染wxSearchdata 第二个为你的search高度
WxSearch.init(that,43,['weappdev','小程序','wxParse','wxSearch','wxNotification']);
WxSearch.initMindKeys(['weappdev.com','微信小程序开发','微信开发','微信小程序']);
},
wxSearchFn: function(e){
var that = this
WxSearch.wxSearchAddHisKey(that);
},
wxSearchInput: function(e){
var that = this
WxSearch.wxSearchInput(e,that);
},
wxSerchFocus: function(e){
var that = this
WxSearch.wxSearchFocus(e,that);
},
wxSearchBlur: function(e){
var that = this
WxSearch.wxSearchBlur(e,that);
},
wxSearchKeyTap:function(e){
var that = this
WxSearch.wxSearchKeyTap(e,that);
},
wxSearchDeleteKey: function(e){
var that = this
WxSearch.wxSearchDeleteKey(e,that);
},
wxSearchDeleteAll: function(e){
var that = this;
WxSearch.wxSearchDeleteAll(that);
},
wxSearchTap: function(e){
var that = this
WxSearch.wxSearchHiddenPancel(that);
}
本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性!本站所有资源仅供学习参考。请不要将它们用于商业目的。否则,一切后果由您负责!如有侵权,请联系我们删除。联系方式:admin@php.cn
相关文章
21 Nov 2023
使用微信小程序实现搜索框自动补全功能随着移动互联网的发展,微信小程序成为了人们生活中不可或缺的一部分。在小程序中,搜索功能是非常常见的需求之一。为了提升用户体验,搜索框的自动补全功能是一个很好的加分项。本文将介绍如何使用微信小程序实现搜索框自动补全功能,并提供具体的代码示例。首先,我们需要在小程序的页面中加入一个搜索框组件,用于用户输入搜索关键词。在wx
27 Oct 2023
如何优化PHP开发的微信小程序?随着微信小程序的普及,越来越多的开发者开始关注如何优化微信小程序的开发。在开发中,PHP是一种常用的后端语言,它提供了丰富的功能和严密的安全性。下面将介绍一些优化的方法和具体代码示例,以帮助开发者更好地使用PHP开发微信小程序。缓存数据在微信小程序开发中,频繁请求接口会增加服务器的负载,降低性能。借助PHP的缓存机制,可以减少
21 Nov 2023
实现微信小程序中的模态框弹出效果,需要具体代码示例现在的移动互联网时代,微信小程序已经成为了人们生活中不可或缺的一部分。在微信小程序的开发过程中,我们经常会遇到需要弹出模态框的需求。模态框可以用来展示一些提示信息、确认对话框等内容,给用户更好的交互体验。在本篇文章中,我将为大家详细介绍如何在微信小程序中实现模态框的弹出效果,并给出相应的代码示例。首先,在小程
31 May 2023
随着微信小程序的普及,越来越多的商家开始进入微信小程序平台销售商品。在小程序中,商品搜索和过滤功能是非常重要的,能够帮助用户快速找到自己需要的商品,从而提高购物效率。PHP作为一门常用的后端编程语言,能够实现微信小程序中的商品搜索和过滤功能。一、商品搜索数据库设计首先,需要在数据库中创建商品表,包含以下字段:商品编号商品名称商品描述商品价格商品库存商品图片路
27 Oct 2023
如何使用PHP实现微信小程序的优惠券领取功能?随着微信小程序的流行,优惠券已成为吸引用户的一种常见营销手段。在小程序中实现优惠券的领取功能,可以提高用户粘性和转化率。本文将介绍如何使用PHP来实现微信小程序的优惠券领取功能,并提供具体的代码示例。首先,我们需要在微信公众平台上创建相应的小程序,并获取到小程序的AppID和AppSecret。这两个参数将被用于
01 Jun 2023
随着微信小程序的快速流行,越来越多的开发者开始关注小程序的用户体验,而用户体验的提升建立在技术实现上。PHP作为一门广泛应用于Web开发的语言,也可以在小程序中发挥重要作用,本文将介绍PHP在微信小程序用户体验优化中的实现技巧。一、使用缓存技术优化小程序性能在小程序开发中,请求服务器数据是不可避免的,而网络请求会消耗时间,降低小程序的性能。因此,使用缓存技
01 Jun 2023
随着微信小程序的不断普及,搜索框功能已经成为许多小程序必不可少的一部分。在PHP中实现微信小程序的搜索框功能也变得越来越重要。本文将介绍如何使用PHP实现微信小程序中的搜索框功能。获取用户输入在实现搜索框功能之前,首先需要获取用户输入的关键字。为此,可以使用微信小程序自带的搜索输入框组件,通过监听其输入事件,获取用户输入的关键字。以下是示例代码://在wxm
06 Apr 2024
可以通过 UniApp 框架使用一套代码开发跨平台小程序,包括 iOS、Android 和 H5。UniApp 开发小程序指南包括以下步骤:安装 UniApp 工具创建项目选择编码语言添加小程序配置编写小程序代码编译小程序上传小程序
Hot Tools
微信小程序demo:仿商城
微信小程序demo:仿商城,上手简单,对商城的一些基本的功能有很好的涉及
外卖:实现类似锚点功能
正是大家需要的类似锚点功能,另外也实现了一些外卖app的典型点菜功能,推荐学习研究;
微信小程序demo:乐助
微信小程序demo:乐助:类似基于地理位置的到位;助人应用,与张小龙的小程序精神有点相似。
微信小程序游戏类demo挑选不同色块
微信小程序游戏类demo挑选不同色块
微信小程序demo:轮播图变换
轮播图样式变换,简单的一个用小程序实现的轮播图,写法容易