「小程序JAVA实战」小程序开源搜索组件(52)

栏目: Java · 发布时间: 6年前

内容简介:上次说了可以在视频中通过cover-view的方式放置一些图片,图片已经放置完毕,现在开始实现里面的功能,先从放大镜搜索功能开始。用户点击放大镜进入搜索页面。https://github.com/limingios/wxProgram.git 中No.15这是一款搜索插件,该搜索框组件基于开源项目

上次说了可以在视频中通过cover-view的方式放置一些图片,图片已经放置完毕,现在开始实现里面的功能,先从放大镜搜索功能开始。用户点击放大镜进入搜索页面。https://github.com/limingios/wxProgram.git 中No.15

「小程序 <a href='https://www.codercto.com/topics/22013.html'>JAVA</a> 实战」小程序开源搜索组件(52)

介绍开源框架

这是一款搜索插件,该搜索框组件基于开源项目 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 (value) {
    // do your job here
    // 示例:跳转
    wx.redirectTo({
      url: '../index/index?searchValue='+value
    })
  },

  // 5 返回回调函数
  myGobackFunction: function () {
    // do your job here
    // 示例:返回
    wx.redirectTo({
      url: '../index/index?searchValue=返回'  
    })
  }

})

安装插件

  • 下载插件
    「小程序JAVA实战」小程序开源搜索组件(52)
  • 拷贝到目录中

    「小程序JAVA实战」小程序开源搜索组件(52)
  • 点击搜索按钮跳转新的搜索页面

    「小程序JAVA实战」小程序开源搜索组件(52)
  • 新的js方面的控制

    「小程序JAVA实战」小程序开源搜索组件(52)
  • 新的css方面的控制

    「小程序JAVA实战」小程序开源搜索组件(52)
  • 新的html方面的控制

    「小程序JAVA实战」小程序开源搜索组件(52)

PS:本次主要对插件进行了一次集成,其实不太负责,也是第一次在小程序里面使用插件,之前听同事说过,有了插件搬砖的工作发现可以轻松很多。

百度未收录

>>原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!

>>原文链接地址:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

敏捷教练

敏捷教练

[英] Rachel Davies、[英] Liz Sedley / 徐毅、袁店明 / 清华大学出版社 / 2013-7 / 49.00元

《敏捷教练:如何打造优秀的敏捷团队》取材于国际知名敏捷教练的真实经历,展示了他们在辅导团队进行敏捷实践过程中所积累的辅导技巧,凝聚着他们在对敏捷辅导的真知灼见,每章还针对特定主题总结了在转型过程中教练和团队可能面对的障碍及其应对方案。 《敏捷教练:如何打造优秀的敏捷团队》具有较强的实用性和指导性,适合项目经理、技术总监和敏捷团队的所有成员阅读与参考。一起来看看 《敏捷教练》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具