和前篇对照,此片为具体实现搜索功能的代码,前面是js部分,中间是wxml,后面是wxss
//引入插件
var WxSearch = require('../../wxSearch/wxSearch.js')
const app = getApp();
import { Category } from 'category-model.js';
var category = new Category(); //实例化 首页 对象
Page({
/**
* 页面的初始数据
*/
data: {
"centent_Show": true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
//初始化的时候渲染wxSearchdata
category.getAllTaglistData((tagData) => {
that.setData({
taglistData: tagData,
});
});
WxSearch.init(that, 43, ['weappdev', '小程序', 'wxParse', 'wxSearch', 'wxNotification']);
},
wxSearchFn: function (e) {
var that = this
WxSearch.wxSearchAddHisKey(that);
var keyword = that.data.wxSearchData.value;
wx.navigateTo({
url: '../list/list?keyword=' + keyword,
})
},
wxSearchInput: function (e) {
var that = this
WxSearch.wxSearchInput(e, that);
},
wxSerchFocus: function (e) {
var that = this
WxSearch.wxSearchFocus(e, that);
},
wxSearchBlur: function (e) {
var that = this
WxSearch.wxSearchBlur(e, that);
},
wxSearchKeyTap: function (e) {
var that = this
WxSearch.wxSearchKeyTap(e, that);
// var keyword=e.target.dataset.key;
// wx.navigateBack({
// keyword: keyword,
// });
var key = e.target.dataset.key;
wx.navigateTo({
url: '../list/list?keyword=' + key,
})
},
wxSearchDeleteKey: function (e) {
var that = this
WxSearch.wxSearchDeleteKey(e, that);
},
wxSearchDeleteAll: function (e) {
var that = this;
WxSearch.wxSearchDeleteAll(that);
},
wxSearchTap: function (e) {
var that = this
WxSearch.wxSearchHiddenPancel(that);
},
/*点击标签查询对应的文章 */
getTagArticle: function (e) {
var tagid = e.target.dataset.tagid;
wx.navigateTo({
url: '../list/list?tagid=' + tagid,
})
}
})
//wxml部分
<view class='main'>
<!-- 搜索框 -->
<view class='logo'>
<input bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{WxSearchData.value}}" bindblur="wxSearchBlur" class='search' placeholder='搜一搜适合你的发型'></input>
<image class='logoicon' src='../images/logo.png'></image>
<button class='search-btn' bindtap="wxSearchFn">搜索</button>
</view>
<view class="search_no" wx:if="{{!centent_Show}}">
<text>很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~</text>
</view>
<view class="history" style="display:{{wxSearchData.view.isShowSearchHistory ? 'block':'none'}}">
<view class='history-title'><text>历史记录</text></view>
<image class='rust' bindtap="wxSearchDeleteAll" src='../images/delete.png'></image>
<view wx:if="{{wxSearchData.his[0]}}">
<block wx:for="{{wxSearchData.his}}">
<view class="categories-label">
<view class="label"><text catchtap="wxSearchKeyTap" data-key="{{item}}">{{item}}</text> </view>
</view>
</block>
</view>
<view wx:else>
<view class="wxSearchHistoryEmpty">搜索历史为空</view>
</view>
</view>
<!-- 分类显示 -->
<block wx:for='{{taglistData}}' wx:for-item='item' wx:key='key'>
<view class='categories'>
<view class='categories-title'><text>{{item.name}}</text></view>
<block wx:for='{{item.taginfo}}' wx:for-item='itone' wx:key='k'>
<view class='categories-label'>
<view class='cate-label' bindtap="getTagArticle" data-tagid="{{itone.id}}">{{itone.name}}</view>
</view>
</block>
<view class="clear"></view>
</view>
</block>
</view>
//wxss部分
/* pages/category/category.wxss */
@import '../template/template.wxss';
@import "/wxSearch/wxSearch.wxss";
.main{
width: 100%;
background-color: #fff
}
.logo{
width: 100%;
height: 70rpx;
position: relative;
background-color: #fff;
box-shadow: 3px 5px 16px 3px #EFEFEF;
}
.search{
background-color: #EEEEEE;
width: 500rpx;
height: 60rpx;
margin-left: 25rpx;
border-radius: 30px;
font-size: 22rpx;
padding: 0 0 0 60rpx;
position: relative;
}
.logoicon{
width: 30rpx;
height: 30rpx;
position: absolute;
top: 16rpx;
left: 48rpx;
}
.search-btn{
width: 130rpx;
height: 60rpx;
font-size: 24rpx;
color: #666666;
background-color: #fff;
position: absolute;
top: 0;
right: 35rpx;
}
.search-btn::after{
border: none;
}
.search_no{
width: 100%;
height: 200rpx;
background-color: #fff;
text-align: center;
line-height: 200rpx
}
.categories-label{
margin: auto 10rpx;
padding-bottom: 40rpx;
/* width: 25%; */
display:inline-block;
}
.clear{
clear: both;
}
.rust{
width:35rpx;
height:40rpx;
display: inline-block;
position: absolute;
right:20rpx;
top: 120rpx
}