小程序开源搜索组件,一个简单方便的微信小程

时间:2019-10-10 00:55来源:编程技术
该寻觅框组件基于开源项目wxSearch进行了核查,主要有以下多少个修改点: 原创小说,接待转载。转发请申明:转发自IT人轶事会,感谢!最早的文章链接地址:「小程序JAVA实战」小程

该寻觅框组件基于开源项目wxSearch进行了核查,主要有以下多少个修改点:

原创小说,接待转载。转发请申明:转发自IT人轶事会,感谢!最早的文章链接地址:「小程序JAVA实战」小程序开源寻找组件

上次说了足以在摄像中经过cover-view的措施放置一些图纸,图片已经停放实现,以后始于完成里面包车型大巴功用,先从放大镜找出效用开首。顾客点击放大镜步入寻找页面。源码: 中No.15

澳门金莎娱乐网站,1.扩大了批注,修改了有些bug,项目得以跑起来。

澳门金莎娱乐网站 1

2.为了消除寻觅框和输入法分界面重叠的难点,将搜索组件作为三个单独的页面。

介绍开源框架

那是一款搜索插件,该搜索框组件基于开源项目wxSearch 举办了创新,首要有以下多少个修改点:

  • 追加了批注,修改了有的bug,项目得以跑起来。
  • 为了消除寻觅框和输入法界面重叠的题目,将追寻组件作为八个单独的页面。
  • 修改了分界面样式,越来越赏心悦目。
  • 削减了揭穿接口,复杂性更低。

拷贝项目根目录的wxSearchView文件夹到你项指标根目录下。在您的wxss文件里导入组件的样式(文件地方为相对地点):

@import "../../wxSearchView/wxSearchView.wxss";

在您的wxml文件里导入组件(文件地点为相对地点):

<include src="../../wxSearchView/wxSearchView.wxml" />

在您的js文件之中增多以下代码,重要包蕴以下5个部分:

  • 导入js文件
  • 寻觅栏初步化
  • 转折函数
  • 追寻回调函数
  • 回来回调函数
// 1 导入js文件var WxSearch = require('../../wxSearchView/wxSearchView.js');Page({ data: {}, onLoad: function () { // 2 搜索栏初始化 var that = this; WxSearch.init( that, // 本页面一个引用 ['杭州', '嘉兴', "海宁", "桐乡", '宁波', '金华'], // 热点搜索推荐,[]表示不使用 ['湖北', '湖南', '北京', "南京"],// 搜索匹配,[]表示不使用 that.mySearchFunction, // 提供一个搜索回调函数 that.myGobackFunction //提供一个返回回调函数 ); }, // 3 转发函数,固定部分,直接拷贝即可 wxSearchInput: WxSearch.wxSearchInput, // 输入变化时的操作 wxSearchKeyTap: WxSearch.wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作 wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录 wxSearchConfirm: WxSearch.wxSearchConfirm, // 搜索函数 wxSearchClear: WxSearch.wxSearchClear, // 清空函数 // 4 搜索回调函数 mySearchFunction: function  { // do your job here // 示例:跳转 wx.redirectTo({ url: '../index/index?searchValue='+value }) }, // 5 返回回调函数 myGobackFunction: function () { // do your job here // 示例:返回 wx.redirectTo({ url: '../index/index?searchValue=返回' }) }})

3.更改了分界面样式,更雅观。

设置插件

  • 下载插件

    澳门金莎娱乐网站 2

  • 拷贝到目录中

    澳门金莎娱乐网站 3

  • 点击寻找按键跳转新的查究页面

    澳门金莎娱乐网站 4

  • 新的js方面包车型客车操纵

    澳门金莎娱乐网站 5

  • 新的css方面包车型客车决定

    澳门金莎娱乐网站 6

  • 新的html方面的调节

    澳门金莎娱乐网站 7

PS:此次重大对插件进行了一回集成,其实不太肩负,也是率先次在小程序里面使用插件,从前听同事说过,有了插件搬砖的职业开采可以轻松很多。

4.削减了揭露接口,复杂性更低。

澳门金莎娱乐网站 8

小程序演示:

澳门金莎娱乐网站 9

类型地址: 前往github项目

编辑:编程技术 本文来源:小程序开源搜索组件,一个简单方便的微信小程

关键词: