全栈项目|小书架|微信小程序-实现搜索功能

叁歲伎倆 2023-06-20 06:26 29阅读 0赞

## 效果图 ##

![在这里插入图片描述][20191209220007428.gif]

上图是小程序端实现的搜索功能效果图。  
从图中可以看出点击首页搜索按钮即可进入搜索页面。

布局样式是：**搜索框 + 热搜内容 + 搜索列表。**

*  搜索框使用 **lin-ui** 中的 [`Searchbar`组件][Searchbar]。
 *  热搜内容的单个按钮使用 **lin-ui** 中的 [`Tag`组件][Tag]，而实现云标签样式的布局是用`css`样式控制。
 *  搜索列表使用 **lin-ui** 中的 [`WaterFlow`布局组件][WaterFlow]。

## 搜索框实现 ##

![在这里插入图片描述][20191209221541834.png]

> 搜索框就是照着 [`Searchbar`组件][Searchbar] 文档实现，因此`wxml`布局如下：

<l-search-bar placeholder="搜索" bg-color="#F6F6F6" shape="circle" show-cancel="{
       {false}}" bind:linconfirm="bindSearch" />

有了搜索布局之后，就需要获取用户输入的内容，然后调用接口去搜索相关数据了。

bindSearch: function(e) {
        let that = this
        // 获取输入的信息
        let q = e.detail.value
        // 调用搜索书籍的接口
        bookModel.getSearchBooks(q, 0, 20)
          .then(res => {
            let data = res;
            if (data.length > 0) {
              that.setData({
                bookList: data
              });
              // 参数2 true表示清除原有数据
              wx.lin.renderWaterFlow(data, true, () => {
                console.log('渲染成功')
              })
            } else {
              that.setData({
                bookList: []
              });
            }
          })
      },

## 热搜实现 ##

![在这里插入图片描述][20191209221446365.png]

> 热搜布局主要使用 **[`card`组件][card] \+ [`Tag`组件][Tag]** 渲染。

`Card`组件主要是提供左上角的提示文本以及背景圆角，而`Tag`组件主要显示热搜的结果。  
`wxml`布局如下：

<l-card type="primary" title="热门搜索" plaintext="{
       {true}}" full="{
       {true}}">
        
        <view class="content">
          <block wx:for="{
       {hotBooks}}" wx:key="index">
            <view class="hot-search-item">
              <l-tag shape="circle" bind:lintap="toBookDetail" data-id="{
       {item.id}}">{
       {item.name}}</l-tag>
            </view>
          </block>
        </view>
      </l-card>

从布局中可以看出我们需要传递`hotBooks`集合给页面，因此在`js`文件中需要请求热搜接口，获取到热搜数据然后赋值给`hotBooks`集合，伪代码如下：

bookModel.getHotSearchBooks()
          .then(res => {
            if (res.length > 0) {
              that.setData({
                hotBooks: res
              });
            } else {
              that.setData({
                hotBooks: []
              });
            }
          })

## 网格列表实现 ##

![在这里插入图片描述][20191209221521329.png]

> 网格布局是采用 [`WaterFlow`布局组件][WaterFlow] 实现的。官方文档写的很好，看一遍基本就能立即使用了。

这里做了空视图的处理，也就是如果没搜索到数据会显示空视图，如果有数据才会显示网格布局。所以`wxml`的代码如下：

上面的网格布局中的`l-water-flow-item="book-item"`，指的是一个组件。  
该组件就是网格中的每一本图书布局。实现起来都比较容易这里就不多介绍了。  
可参考 **[`WaterFlow`布局组件][WaterFlow]** 以及 **[小程序自定义组件][Link 1]**

以上就是本次的介绍。

--------------------

> 扫码关注公众号，轻撩即可。

![在这里插入图片描述][format_png]

[20191209220007428.gif]: https://img-blog.csdnimg.cn/20191209220007428.gif
[Searchbar]: http://doc.mini.7yue.pro/component/shopping/search.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
[Tag]: http://doc.mini.7yue.pro/component/view/tag.html#%E6%A0%87%E7%AD%BE%E5%BD%A2%E7%8A%B6
[WaterFlow]: http://doc.mini.7yue.pro/component/layout/water-flow.html
[20191209221541834.png]: https://img-blog.csdnimg.cn/20191209221541834.png
[20191209221446365.png]: https://img-blog.csdnimg.cn/20191209221446365.png
[card]: http://doc.mini.7yue.pro/component/layout/card.html#%E9%80%9A%E6%A0%8F%E5%8D%A1%E7%89%87
[20191209221521329.png]: https://img-blog.csdnimg.cn/20191209221521329.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tLzg2OWRmZmQ3OWY4ZDA4MDg5N2M3MDUwN2Y2OTZkZThlNjdhNTczMTI2YTU2LXNwUE1GSF9mdzY1OA?x-oss-process=image/format,png