微信小程序搜索框编写怎么做?

　　微信小程序搜索框编写怎么做?在进行微信小程序搜索框编写的时候会使用到一些微信小程序代码，接下来的文章中，小编会为大家讲解微信小程序搜索框编写的相关问题，来跟着小编一起了解吧。

　　微信小程序搜索框编写怎么做?

　　微信小程序搜索框效果图如下：

　　点击页面中 黄色的input就可以跳转到真正的搜索页面

　　搜索页面中也是有个input搜索框，旁边有个小叉号，可以清除input里的文字。

　　接下来还要讲下搜索页面的逻辑:其实也非常简单。

　　微信小程序搜索框编写需要的微信小程序代码：

　　* 引入

　　// 小程序模版引入

　　// 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','微信小程序开发','微信开发','微信小程序']);

　　},

　　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);

　　}

　　微信小程序搜索框编写怎么做?微信小程序搜索框编写所需要的微信小程序代码已经整理出来了，各位亲们可以把以上的代码收藏起来哦，然后有需要的时候拿去使用，敬请大家多关注微小乔。

相关推荐：

微信小程序input重影什么原因?怎么解决重影?

微信小程序input样式设计怎么实现?

微信小程序清空input怎么弄