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

效果图

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

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

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

搜索框实现

搜索框就是照着 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: []});}})},

热搜实现

热搜布局主要使用 card组件 + 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: []});}})

网格列表实现

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

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

<view class="book-container" wx:else><!-- 搜索列表 --><block wx:if="{{bookList.length > 0}}"><l-water-flow generic:l-water-flow-item="book-item" column-gap="20rpx" /></block><block wx:else><view class="empty-container"><image class="userinfo-avatar" src="../../images/sad.png" background-size="cover"></image><view class="donut-container">空空如也</view></view></block>
</view>

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

以上就是本次的介绍。

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

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

全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果首页功能主要有搜索(下篇文章介绍) 图书列表图书列表分析一波: 列表是水平滑动点击列表会有按压效果:布局整体缩小每个布局的信息从上到下排列分别是:图片.书名.作者.出版社每个布局 ...
全栈项目|小书架|微信小程序-书籍详情功能实现
效果图实现分析从效果图上分析,书籍详情是通过点击首页的item后进入. 进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口. 点击登录之后即可加载出用户评 ...
全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能
效果图这一节介绍,登录回调以及喜欢列表的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成 ...
全栈项目|小书架|服务器端-NodeJS+Koa2 实现搜索功能
搜索功能会包含:热搜.搜索列表. 热搜功能在电商的搜索中经常看到,热搜数据的来源有两种用户真实的搜索数据,根据算法进行排序人为推送的数据想想微博热搜是可以买的就知道热搜功能多么重要了. 我采用第 ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...
HaaS EDU物联网项目实战：微信小程序实现云养花
HaaS EDU K1是一款高颜值.高性能.高集成度的物联网开发板,板载功能强大的4核(双核300Mhz M33+双核1GHz A7)主芯片,2.4G/5G双频Wi-Fi,双模蓝牙(经典蓝牙/BLE) ...
驾校分期-众筹项目java前后端分离项目vue（微信小程序+java前后端源码下载）
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
从开源项目学做微信小程序
1. 项目名称:灵动电商之微信小程序端项目地址:黄秀杰/lendoo-wx - 码云 2. 项目名称:高仿网易 B2C 商城项目简介:本项目是基于 Node.js + MySQL 开发的高仿网易严 ...
小程序源码：修复图片音频全新升级带特效喝酒神器小游戏微信小程序
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...

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

效果图

搜索框实现

热搜实现

网格列表实现

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

最新文章

热门文章