小程序-实现列表- 搜索功能的实现（6）

list.wxml引入搜索文件

<!-- 引入搜索框 -->
<include src="/includes/search-bar.wxml"/>

搜索文件的结构如下：

<view class="weui-search-bar"><!-- 1  搜索--><view class="weui-search-bar__form"><!-- 1.1 靠左显示的搜索：图片、输入框、图片组合,z-index: 1;在1.2下面--><view class="weui-search-bar__box"><!-- 1 搜索图标 --><icon class="weui-icon-search_in-box" type="search" size="14" bindtap="searchHandle"/><!-- 2 输入框值 --><input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{searchText}}" focus="{{searchShowed}}" bindinput="searchChangeHandle" bindconfirm="searchHandle" /><!-- 有文字时出现X删除--><view class="weui-icon-clear" wx:if="{{searchText}}" bindtap="clearSearchHandle"><icon type="clear" size="14" /></view></view><!-- 1.2 居中显示的搜索：图片和文字组合，z-index: 2;覆盖在1.1上面--><label class="weui-search-bar__label" hidden="{{searchShowed}}" bindtap="showSearchHandle"><icon class="weui-icon-search" type="search" size="14" /><view class="weui-search-bar__text">搜索</view></label></view><!-- 2 获取焦点时，显示取消  --><view class="weui-search-bar__cancel-btn" hidden="{{!searchShowed}}" bindtap="hideSearchHandle">取消</view>
</view>

在list.js页面完成搜索的逻辑，初始化数据：

data: {category: {},//分类shops: [],//列表pageIndex: 0,//当前页码pageSize: 20,//每页条数totalCount: 0,//总条数hasMore: true,//是否加载更多searchShowed: false,//控制搜索状态的显示searchText: '',//查询文字lastRequestTime:0//上次加载的时间},

在list.js页面完成搜索的逻辑：

1 点击居中的输入框触发showSearchHandle()，用来控制居中的输入框隐藏、靠左的输入框获取到焦点、“取消”显示；

2 点击“取消”文字触发hideSearchHandle()，居中的搜索显示，因为居中的搜索z-index:2；还原初始化查询条件，保持初始数据；

3 输入框有文字时，点击X清除触发clearSearchHandle()，清除输入框的文字；

4 输入框文字同步渲染到页面 searchChangeHandle(e)；

5 输入文字，点击键盘、搜索图标完成键进行搜索触发 searchHandle()，实现查询条件的搜索功能

// 搜索文件涉及的方法// 1 点击输入框，居中的搜索hiddenshowSearchHandle() {this.setData({searchShowed: true})},// 2 点击“取消”文字，文字清空，居中的搜索显示，因为居中的搜索z-index:2hideSearchHandle() {this.setData({shops: [],pageIndex: 0,totalCount: 0,hasMore: true,searchText: '',searchShowed: false,})this.loadMore()},// 3 输入框有文字时，点击X清除clearSearchHandle() {this.setData({searchText: ''})},// 4 输入框文字同步到页面searchChangeHandle(e) {this.setData({searchText: e.detail.value})},// 5 输入文字，点击键盘、搜索图标完成键进行搜索searchHandle() {this.setData({shops: [],pageIndex: 0,totalCount: 0,hasMore: true})this.loadMore()},

小程序-实现列表- 搜索功能的实现（6）相关推荐

微信小程序最全搜索功能
微信小程序最全搜索功能主要功能: 搜索点击x号清空输入框内容点击取消返回上一页面搜索数据为空提示历史记录清空历史记录点击历史记录搜索点击搜索列表带参数返回上一页面代码如下: < ...
微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器效果组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
小程序云开发搜索功能的实现正则_码code | 如何借助小程序云开发实现小程序支付功能...
转载来源:编程小石头我们在做小程序支付相关的开发时,总会遇到这些难题.小程序调用微信支付时,必须要有自己的服务器,有自己的备案域名,有自己的后台开发.这就导致我们做小程序支付时的成本很大. 本节就来 ...
mysql表点赞实现_小程序实现列表点赞功能
最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了. 思路如下: 1.找到对应 ...
小程序之列表点赞功能的实现
最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的苦逼实践调试,最终实现了(真的好累啊). 思路如 ...
微信小程序开发实现搜索功能
对于搜索都是会有一些需要的,所以搜索页面还是可以复用的.主页面就是下面这样: 这个页面在pages/components/component2/component2.wxml 点击页面中黄色的inp ...
小程序云开发搜索功能的实现正则_几行代码实现小程序云开发提现功能
先看效果: 纯云开发实现,下面说使用步骤:一:开通商户的企业付款到领取功能说明地址: https://pay.weixin.qq.com/wiki/doc/api/tools/mch_pay.php? ...
微信小程序实现历史搜索功能（h5同理）
1.实现效果 2.实现原理将数据存在storage中. wx.setStorageSync('search_history', JSON.stringify(this.data.list)) 取数组 ...
微信小程序如何实现搜索功能
思路: 1.先对input框绑定个search方法进行搜索 2.在js中写sarch方法,利用wx.request查找数据,success成功之后开始查找自己要的数据. 3.根据input框的输入值且 ...

小程序-实现列表- 搜索功能的实现（6）

小程序-实现列表- 搜索功能的实现（6）相关推荐

最新文章

热门文章