用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序入门《四》本地缓存和搜索(附源码)

纸飞机 2018-3-8 09:36

作者:ITDragon龙,原文地址 这章谈谈搜索和本地缓存。主要功能有,点击搜索显示搜索输入框同时显示搜索历史记录,点击右侧搜索按钮搜索数据同时保存到搜索历史记录中,清除历史记录等功能。 效果图: 先介绍搜索的 ...

作者:ITDragon龙,

原文地址


这章谈谈搜索和本地缓存。主要功能有,点击搜索显示搜索输入框同时显示搜索历史记录,点击右侧搜索按钮搜索数据同时保存到搜索历史记录中,清除历史记录等功能。
效果图:

先介绍搜索的功能:
第一步,做一个搜索的输入框,可以利用weui-wxss框架中searchbar。没有weui-wxss 可以在

https://github.com/weui/weui-wxss

找到目录 dist - example - searchbar 目录下找到。我将原本的"取消"换成了"搜索"的触发按钮。并修改 bindtap="searchData"

  1. class="weui-search-bar">
  2. class="weui-search-bar__form">
  3. class="weui-search-bar__box">
  4. class="weui-icon-search_in-box" type="search" size="14">
  5. type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindtap="searchLogShowed"/>
  6. class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
  7. type="clear" size="14">
  8. class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
  9. class="weui-icon-search" type="search" size="14">
  10. class="weui-search-bar__text">搜索
  11. class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="searchData">搜索
  12. wx:if="{{searchLogShowed}}">
  13. class="search-log" wx:for-item="searchLog" wx:for="{{searchLogList}}" wx:key="searchLogListId" bindtap="searchDataByLog" data-log="{{searchLog}}">
  14. {{searchLog}}
  15. class="clear-search-log" bindtap="clearSearchLog">清除搜索记录

js:

  1. Page({
  2. data:{
  3. msgList:[], // 存储文章列表信息
  4. searchLogList:[], // 存储搜索历史记录信息
  5. hidden:true, // 加载提示框是否显示
  6. scrollTop : 0, // 居顶部高度
  7. inputShowed: false, // 搜索输入框是否显示
  8. inputVal: "", // 搜索的内容
  9. searchLogShowed: false // 是否显示搜索历史记录
  10. },
  11. onLoad:function(options){
  12. // 页面初始化 options为页面跳转所带来的参数
  13. var that = this;
  14. wx.getSystemInfo({
  15. success: function(res) {
  16. that.setData( {
  17. windowHeight: res.windowHeight,
  18. windowWidth: res.windowWidth
  19. })
  20. }
  21. });
  22. // 如果缓存中有值,先从缓存中读取
  23. var info =

    邀请

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏