E企盈营销工具技术服务商 热线:4006-838-530

微信小程序入门六本高新区E企盈小程序地缓存和搜索

上一章介绍了上拉加载下拉刷新的功能 这章谈谈搜索和本地缓存。主要功能有,点击搜索显示搜索输入框同时显示搜索历史记录,点击右侧搜索按钮搜索数据同时保存到搜索历史记录中,清除历史记录等功能。效果图:先介绍搜索的功能:第一步,做一个搜索的输入框,可以利用weui-wxss框架中searchbar。没有weui-wxss 可以在 https://github.com/weui/weui-wxss 找到目录 dist – example – searchbar 目录下找到。我将原本的”取消”换成了”搜索”的触发按钮。并修改 bindtap=”searchData”  view class="weui-search-bar"                    view class="weui-search-bar__form"                        view class="weui-search-bar__box"                            icon class="weui-icon-search_in-box" type="search" size="14"/icon                            input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindtap="searchLogShowed"/                            view class="weui-icon-clear" wx:if="{{inputVal.length 0}}" bindtap="clearInput"                                icon type="clear" size="14"/icon                            /view                        /view                        label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput"                            icon class="weui-icon-search" type="search" size="14"/icon                            view class="weui-search-bar__text"搜索/view                        /label                    /view                    view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="searchData"搜索/view                /view                view wx:if="{{searchLogShowed}}"                    view  class="search-log" wx:for-item="searchLog" wx:for="{{searchLogList}}"  wx:key="searchLogListId" bindtap="searchDataByLog" data-log="{{searchLog}}"                        {{searchLog}}                     /view                    view class="clear-search-log" bindtap="clearSearchLog"清除搜索记录/view                /view

js: Page({  data:{    msgList:[], // 存储文章列表信息    searchLogList:[], // 存储搜索历史记录信息    hidden:true, // 加载提示框是否显示    scrollTop : 0, // 居顶部高度    inputShowed: false, // 搜索输入框是否显示    inputVal: "", // 搜索的内容    searchLogShowed: false // 是否显示搜索历史记录  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数    var that = this;    wx.getSystemInfo({      success: function(res) {        that.setData( {          windowHeight: res.windowHeight,          windowWidth: res.windowWidth        })      }    });    // 如果缓存中有值,先从缓存中读取    var info = wx.getStorageSync(msgListKey);    if (info) {      that.setData({        msgList:info      });    } else {      loadMsgData(that);    }  },  onReady:function(){    // 页面渲染完成  },  onShow:function(){    // 页面显示  },  // 显示搜索输入框和搜索历史记录  showInput: function () {    var that = this;    if ("" != wx.getStorageSync('searchLog')) {      that.setData({          inputShowed: true,          searchLogShowed: true,          searchLogList : wx.getStorageSync('searchLog')      });    } else {      that.setData({          inputShowed: true,          searchLogShowed: true      });    }  },  // 显示搜索历史记录  searchLogShowed: function(){    var that = this;    if ("" != wx.getStorageSync('searchLog')) {      that.setData({          searchLogShowed: true,          searchLogList : wx.getStorageSync('searchLog')      });    } else {      that.setData({          searchLogShowed: true      });    }  },  // 点击 搜索 按钮后 隐藏搜索记录,并加载数据  searchData: function () {    var that = this;    that.setData({        msgList : [],        scrollTop : 0,        searchLogShowed: false    });    pageNum = 1;    loadMsgData(that);    // 搜索后将搜索记录缓存到本地    if ("" != searchTitle) {      var searchLogData = that.data.searchLogList;      searchLogData.push(searchTitle);      wx.setStorageSync('searchLog', searchLogData);    }  },  // 点击叉叉icon 清除输入内容,同时清空关键字,并加载数据  clearInput: function () {    var that = this;    that.setData({        msgList : [],        scrollTop : 0,        inputVal: ""    });    searchTitle = "";    pageNum = 1;    loadMsgData(that);  },  // 输入内容时 把当前内容赋值给 查询的关键字,并显示搜索记录  inputTyping: function (e) {    var that = this;    // 如果不做这个if判断,会导致 searchLogList 的数据类型由 list 变为 字符串    if ("" != wx.getStorageSync('searchLog')) {      that.setData({          inputVal: e.detail.value,          searchLogList : wx.getStorageSync('searchLog')      });    } else {      that.setData({          inputVal: e.detail.value,          searchLogShowed: true      });    }    searchTitle = e.detail.value;  },  // 通过搜索记录查询数据  searchDataByLog: function(e){    // 从view中获取值,在view标签中定义data-name(name自定义,比如view中是data-log="123" ; 那么e.target.dataset.log=123)    searchTitle = e.target.dataset.log;    var that = this;    that.setData({        msgList : [],        scrollTop : 0,        searchLogShowed: false    });    pageNum = 1;    loadMsgData(that);  },  // 清楚搜索记录  clearSearchLog:function(){    var that = this;    that.setData({      hidden:false    });    wx.removeStorageSync("searchLog");    that.setData({        scrollTop : 0,        searchLogShowed: false,        hidden:true    });  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }})

完整代码(如果对其他有疑问,可以看前面几章内容,代码中有很详细的注释):list.wxml : !--参数说明:id :文章idsrc :文章图片路径title :文章标题time :文章创建时间scrollTop :距顶部位置windowHeight :设备的高windowWidth :设备的宽inputVal :输入框的值inputShowed :搜索输入框的 booleansearchLogShowed :是否显示搜索历史记录 booleanhidden :是否显示加载提示框 booleanmsgList :文章列表对于wx-for循环提示警告错误 :"Now you can provide attr "wx:key" for a "wx:for" to improve performance." 可以参考http://blog.csdn.net/sinat_31177681/article/details/53557642--!--用name 定义模版--template name="msgTemp"    !--    1. scaleToFill : 图片全部填充显示,可能导致变形 默认    2. aspectFit : 图片全部显示,以最长边为准    3. aspectFill : 图片全部显示,以最短边为准    4. widthFix : 宽不变,全部显示图片    --    view  class="weui-panel__bd"        navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"            view class="weui-media-box__hd weui-media-box__hd_in-appmsg"                image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/            /view            view class="weui-media-box__bd weui-media-box__bd_in-appmsg"          开通学习用品小程序电话:4006-838-530      view class="weui-media-box__title"{{title}}/view                view class="weui-media-box__desc"{{time}}/view            /view        /navigator    /view/templateview  class="page"    view class="page__bd"        scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh"  bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access"            view class="weui-panel__hd"                view class="weui-search-bar"                    view class="weui-search-bar__form"                        view class="weui-search-bar__box"                            icon class="weui-icon-search_in-box" type="search" size="14"/icon                            input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindtap="searchLogShowed"/                            view class="weui-icon-clear" wx:if="{{inputVal.length 0}}" bindtap="clearInput"                                icon type="clear" size="14"/icon                            /view                        /view                        label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput"                            icon class="weui-icon-search" type="search" size="14"/icon                            view class="weui-search-bar__text"搜索/view                        /label                    /view                    view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="searchData"搜索/view                /view                view wx:if="{{searchLogShowed}}"                    view  class="search-log" wx:for-item="searchLog" wx:for="{{searchLogList}}"  wx:key="searchLogListId" bindtap="searchDataByLog" data-log="{{searchLog}}"                        {{searchLog}}                     /view                    view class="clear-search-log" bindtap="clearSearchLog"清除搜索记录/view                /view            /view            view wx:for-items="{{msgList}}" wx:key="{{item.id}}"                view class="kind-list__item"                    !--用is 使用模版--                    template is="msgTemp" data="{{...item}}"/                /view            /view        /scroll-view        view            loading hidden="{{hidden}}" bindchange="loadingChange"            加载中...            /loading        /view    /view    view class="page__ft"    /view/view

list.wxss : /* pages/list/list.wxss */.weui-search-bar {    position:relative;    padding:6px 10px;    display:-webkit-box;    display:-webkit-flex;    display:flex;    box-sizing:border-box;    background-color:#EFEFF4;    border-top:0 solid #D7D6DC;    border-bottom:0 solid #D7D6DC;    border-radius:4px;}.search-log{    border:1px solid #eee !important;    display:inline-block !important;    margin-left:10px !important;    margin-top:5px !important;    border-radius:5px;    padding-left:14px;    padding-right:14px;    box-sizing:border-box;    text-align:center;    text-decoration:none;    line-height:2.55555556;}.clear-search-log{    text-align: center;}

list.js : // pages/list/list.jsvar app = getApp();var pageNum = 1; // 当前页数var searchTitle = ""; // 搜索关键字var msgListKey = ""; // 文章列表本地缓存key/** * post 请求加载文章列表数据  * "page" :页数 * "pageSize" :每页数量 * "search_LIKE_title" :以文章标题模糊查询 ,格式为 "search_LIKE_实体类属性" */var loadMsgData = function(that){  msgListKey = "msgList" + pageNum;  // 显示加载的icon  that.setData({    hidden:false  });  // 获取上一页数据  var allMsg = that.data.msgList;  app.ajax.req('/itdragon/findAll',{    "page":pageNum ,     "pageSize" : 6 ,    "search_LIKE_title" : searchTitle  },function(res){      // 拼接当前页数据,不能直接 allMsg.push(res);     for(var i = 0; i res.length; i++){      allMsg.push(res[i]);    }    // 赋值并隐藏加载的icon    that.setData({      msgList:allMsg,      hidden:true    });    // 缓存列表页面    wx.setStorageSync(msgListKey,allMsg);  });  // 页数加一  pageNum ++;}Page({  data:{    msgList:[], // 存储文章列表信息    searchLogList:[], // 存储搜索历史记录信息    hidden:true, // 加载提示框是否显示    scrollTop : 0, // 居顶部高度    inputShowed: false, // 搜索输入框是否显示    inputVal: "", // 搜索的内容    searchLogShowed: false // 是否显示搜索历史记录  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数    var that = this;    wx.getSystemInfo({      success: function(res) {        that.setData( {          windowHeight: res.windowHeight,          windowWidth: res.windowWidth        })      }    });    // 如果缓存中有值,先从缓存中读取    var info = wx.getStorageSync(msgListKey);    if (info) {      that.setData({        msgList:info      });    } else {      loadMsgData(that);    }  },  onReady:function(){    // 页面渲染完成  },  onShow:function(){    // 页面显示  },  // 下拉刷新数据 下拉动态效果不明显有待改善  pullDownRefresh: function() {    var that = this;    // 刷新的准备工作,想将页开通真丝围巾小程序电话:4006-838-530数设置为一,然后清空文章列表信息,定位在距顶部为0的地方    pageNum = 1;    that.setData({      msgList : [],      scrollTop : 0    });    // 加载数据    loadMsgData(that);  },  // 上拉加载数据   pullUpLoad: function() {    var that = this;    loadMsgData(that);  },  // 定位数据  scroll:function(event){    var that = this;    that.setData({      scrollTop : event.detail.scrollTop    });  },  // 显示搜索输入框和搜索历史记录  showInput: function () {    var that = this;    if ("" != wx.getStorageSync('searchLog')) {      that.setData({          inputShowed: true,          searchLogShowed: true,          searchLogList : wx.getStorageSync('searchLog')      });    } else {      that.setData({          inputShowed: true,          searchLogShowed: true      });    }  },  // 显示搜索历史记录  searchLogShowed: function(){    var that = this;    if ("" != wx.getStorageSync('searchLog')) {      that.setData({          searchLogShowed: true,          searchLogList : wx.getStorageSync('searchLog')      });    } else {      that.setData({          searchLogShowed: true      });    }  },  // 点击 搜索 按钮后 隐藏搜索记录,并加载数据  searchData: function () {    var that = this;    that.setData({        msgList : [],        scrollTop : 0,        searchLogShowed: false    });    pageNum = 1;    loadMsgData(that);    // 搜索后将搜索记录缓存到本地    if ("" != searchTitle) {      var searchLogData = that.data.searchLogList;      searchLogData.push(searchTitle);      wx.setStorageSync('searchLog', searchLogData);    }  },  // 点击叉叉icon 清除输入内容,同时清空关键字,并加载数据  clearInput: function () {    var that = this;    that.setData({        msgList : [],        scrollTop : 0,        inputVal: ""    });    searchTitle = "";    pageNum = 1;    loadMsgData(that);  },  // 输入内容时 把当前内容赋值给 查询的关键字,并显示搜索记录  inputTyping: function (e) {    var that = this;    // 如果不做这个if判断,会导致 searchLogList 的数据类型由 list 变为 字符串    if ("" != wx.getStorageSync('searchLog')) {      that.setData({          inputVal: e.detail.value,          searchLogList : wx.getStorageSync('searchLog')      });    } else {      that.setData({          inputVal: e.detail.value,          searchLogShowed: true      });    }    searchTitle = e.detail.value;  },  // 通过搜索记录查询数据  searchDataByLog: function(e){    // 从view中获取值,在view标签中定义data-name(name自定义,比如view中是data-log="123" ; 那么e.target.dataset.log=123)    searchTitle = e.target.dataset.log;    var that = this;    that.setData({        msgList : [],        scrollTop : 0,        searchLogShowed: false,        inputVal: searchTitle    });    pageNum = 1;    loadMsgData(that);  },  // 清楚搜索记录  clearSearchLog:function(){    var that = this;    that.setData({      hidden:false    });    wx.removeStorageSync("searchLog");    that.setData({        scrollTop : 0,        searchLogShowed: false,        hidden:true,        searchLogList:[]    });  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }})

如果有什么bug和好的建议,可以提出来。前六章对应的demo源码:http://download.csdn.net/detai开通辅料里布小程序电话:4006-838-530l/qq_19558705/9780791demo源码 list.js 文件中,searchDataByLog 方法中 that.setData中需要添加 inputVal: searchTitle微信小程序入门教程集合:微信小程序入门教程全集

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序入门六本高新区E企盈小程序地缓存和搜索
分享到: 更多 (0)

评论 抢沙发

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏