小程序搜索功能

和前篇对照,此片为具体实现搜索功能的代码,前面是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>

/* 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

}