小程序模板网

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

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

先介绍搜索的功能: 
第一步,做一个搜索的输入框,可以利用weui-wxss框架中searchbar。没有weui-wxss 可以在 https://github.com/weui/weui-wxss 找到目录 dist - example - searchbar 目录下找到。我将原本的"取消"换成了"搜索"的触发按钮。并修改 bindtap="searchData" 

 

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

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 =


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23438.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询