微信小程序结合Storage实现搜索历史效果

蔚落 2022-09-02 00:49 178阅读 0赞

**实现目标**

![17befb84dedfc160f136ecd7ab7e43dc.gif][]

**代码实现**

集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>&lt;!-- wxml --&gt;</code> <code>&lt;</code><code>view</code> <code>class</code><code>=</code><code>"search-box"</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>view</code> <code>class</code><code>=</code><code>'icon'</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>image</code> <code>src</code><code>=</code><code>'../../assets/search.png'</code> <code>mode</code><code>=</code><code>'widthFix'</code><code>&gt;&lt;/</code><code>image</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;!-- 使用bindinput属性绑定getSearchKey函数获取input组件中的值--&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;!-- 使用bindblur属性绑定routeToSearchResPage函数处理input失去焦点事件--&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>input</code> <code>placeholder</code><code>=</code><code>'搜索你想购买的商品'</code> <code>bindinput</code><code>=</code><code>'getSearchKey'</code> <code>bindblur</code><code>=</code><code>'routeToSearchResPage'</code><code>&gt;&lt;/</code><code>input</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>view</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>text</code><code>&gt;取消&lt;/</code><code>text</code><code>&gt;</code> <code>&lt;/</code><code>view</code><code>&gt;</code> <code>&lt;</code><code>view</code> <code>class</code><code>=</code><code>'options'</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>text</code><code>&gt;历史搜索记录&lt;/</code><code>text</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>text</code> <code>bindtap</code><code>=</code><code>'clearHistory'</code><code>&gt;清空&lt;/</code><code>text</code><code>&gt;</code> <code>&lt;/</code><code>view</code><code>&gt;</code> <code>&lt;</code><code>view</code> <code>class</code><code>=</code><code>'options'</code><code>&gt;</code> <code>&lt;!-- 遍历 history 数组 --&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>text</code> <code>class</code><code>=</code><code>'item'</code> <code>wx:for</code><code>=</code><code>'{ {history}}'</code> <code>data-index</code><code>=</code><code>'{ {index}}'</code> <code>bindtap</code><code>=</code><code>'routeToSearchResPage'</code><code>&gt;{ {item}}&lt;/</code><code>text</code><code>&gt;</code> <code>&lt;/</code><code>view</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

样式表 可无视

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 </td> 
 <td> <code>/* wxss */</code> <code>.search-box { </code> <code>&nbsp;</code><code>background-color</code><code>: </code><code>#142341</code><code>;</code> <code>&nbsp;</code><code>overflow</code><code>: </code><code>hidden</code><code>;</code> <code>&nbsp;</code><code>padding</code><code>: </code><code>3%</code><code>;</code> <code>}</code> <code>.search-box .</code><code>icon</code> <code>{ </code> <code>&nbsp;</code><code>width</code><code>: </code><code>80%</code><code>;</code> <code>&nbsp;</code><code>padding-left</code><code>: </code><code>2%</code><code>;</code> <code>&nbsp;</code><code>background-color</code><code>: </code><code>#fff</code><code>;</code> <code>&nbsp;</code><code>float</code><code>: </code><code>left</code><code>;</code> <code>&nbsp;</code><code>border-radius: </code><code>1</code><code>rem;</code> <code>}</code> <code>.search-box .</code><code>icon</code> <code>image { </code> <code>&nbsp;</code><code>width</code><code>: </code><code>1</code><code>rem;</code> <code>&nbsp;</code><code>height</code><code>: </code><code>1</code><code>rem;</code> <code>&nbsp;</code><code>display</code><code>: </code><code>block</code><code>;</code> <code>&nbsp;</code><code>margin</code><code>: </code><code>0.5</code><code>rem </code><code>0</code><code>;</code> <code>&nbsp;</code><code>float</code><code>: </code><code>left</code><code>;</code> <code>}</code> <code>.search-box input { </code> <code>&nbsp;</code><code>display</code><code>: </code><code>block</code><code>;</code> <code>&nbsp;</code><code>font-size</code><code>: </code><code>0.8</code><code>rem;</code> <code>&nbsp;</code><code>height</code><code>: </code><code>2</code><code>rem;</code> <code>&nbsp;</code><code>line-height</code><code>: </code><code>2</code><code>rem;</code> <code>&nbsp;</code><code>float</code><code>: </code><code>left</code><code>;</code> <code>&nbsp;</code><code>margin-left</code><code>: </code><code>5%</code><code>;</code> <code>}</code> <code>.search-box text { </code> <code>&nbsp;</code><code>width</code><code>: </code><code>18%</code><code>;</code> <code>&nbsp;</code><code>float</code><code>: </code><code>left</code><code>;</code> <code>&nbsp;</code><code>color</code><code>: </code><code>#fff</code><code>;</code> <code>&nbsp;</code><code>line-height</code><code>: </code><code>2</code><code>rem;</code> <code>&nbsp;</code><code>text-align</code><code>: </code><code>center</code><code>;</code> <code>&nbsp;</code><code>font-size</code><code>: </code><code>0.8</code><code>rem;</code> <code>}</code> <code>.options { </code> <code>&nbsp;</code><code>width</code><code>: </code><code>94%</code><code>;</code> <code>&nbsp;</code><code>margin</code><code>: </code><code>3%</code><code>;</code> <code>&nbsp;</code><code>font-size</code><code>: </code><code>0.8</code><code>rem;</code> <code>&nbsp;</code><code>color</code><code>: </code><code>#999</code><code>;</code> <code>}</code> <code>.options text:last-child { </code> <code>&nbsp;</code><code>color</code><code>: </code><code>#1268bb</code><code>;</code> <code>&nbsp;</code><code>float</code><code>: </code><code>right</code><code>;</code> <code>}</code> <code>.options .item { </code> <code>&nbsp;</code><code>padding</code><code>: </code><code>0.2</code><code>rem </code><code>0.5</code><code>rem;</code> <code>&nbsp;</code><code>background-color</code><code>: </code><code>#eee</code><code>;</code> <code>&nbsp;</code><code>float</code><code>: </code><code>left</code> <code>!important</code><code>;</code> <code>&nbsp;</code><code>color</code><code>: </code><code>#565656</code> <code>!important</code><code>;</code> <code>&nbsp;</code><code>border-radius: </code><code>0.1</code><code>rem;</code> <code>&nbsp;</code><code>margin</code><code>: </code><code>3%</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

JavaScript

本地存储可在微信开发者工具调试的Storage可见。

![3ca28b08bd6ea6118c36b4e447b27334.png][]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[17befb84dedfc160f136ecd7ab7e43dc.gif]: /images/20220829/4cc4ad1f546148dc913ff7e809ca8fff.png
[3ca28b08bd6ea6118c36b4e447b27334.png]: /images/20220829/6e98f1d8315d486ebf7b10ce45ed080c.png