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 点击输入框,居中的搜索hidden
showSearchHandle() {
this.setData({
searchShowed: true
})
},
// 2 点击“取消”文字,文字清空,居中的搜索显示,因为居中的搜索z-index:2
hideSearchHandle() {
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()
},