微信 小程序组件 搜索分类 带缓存(终极 上线版)
JS
// pages/search/search.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
inputValue:'',
// 焦点默认数据
keyListId: 1,
keyselecte: true,
// keylist:{
key1:'热销品牌',
key2:'热销商品',
keylist1: [],
keylist2: [],
keylist3: []
// }
},
//----------------------
inputValue:function(e){
// console.log(e.detail.value);
var inputValue = e.detail.value;
this.setData({
inputValue: inputValue
})
},
inputFn:function(){
var inputValue = this.data.inputValue;
if (inputValue!=''){
// var keyInto = e.currentTarget.dataset.keyname
// console.log(e.currentTarget.dataset.keyname)
// 页面跳转
wx.navigateTo({
url: 'list/list?key=' + inputValue
})
}
},
//-----------------------------------------------
// 焦点控制函数
keyList:function(e){
var that=this;
// var keylist = this.data.keylist
var idx = e.currentTarget.dataset.idx;
// console.log(idx)
var keyselecte = this.data.keyselecte;
var keyListId = this.data.keyListId;
keyListId = idx ;
keyselecte = (idx == 1?true:false);
that.setData({
keyListId: keyListId,
keyselecte: keyselecte
})
// 请求数
wx.request({
url: 'https://www.didu86.com/Clothes-manager-web/querySearch',
data: {
appkey: '5e5ju20na345sdf4nw361qb9789asdf',
key: "test",
type: "data",
cid: idx
},
success: function (res) {
var result = res.data;
// console.log(result)
if (idx==1){
that.setData({
keylist1: result
})
}else{
that.setData({
keylist2: result
})
}
}
});
},
//-----------------------------------------------
// 控制关键词函数
keyText:function(e){
// 控制记忆关键词的添加
var turn='';
var index = e.currentTarget.dataset.keyid;
// var keylist = this.data.keylist;
var keylist3 = this.data.keylist3;
var keyListId = this.data.keyListId;
// keyListId = "keylist" + keyListId;
if (keyListId==1){
turn = this.data.keylist1[index].key;
}else{
turn = this.data.keylist2[index].key;
}
// var turn = keyListId[index].key;
for (var i = 0; i<keylist3.length;i++){
if (turn === keylist3[i].key){
console.log(i);
keylist3.splice(i,1)
}
}
var chekey=[{ "key": turn }];
var keylist3=chekey.concat(keylist3)
// keylist3.unshift(chekey);
// console.log(unshift())
// keylist.
for (var i = 0; i < keylist3.length; i++){
if (keylist3[i].key == '' || keylist3[i].key==0){
keylist3.splice(i, 1)
}
}
wx.setStorageSync('keylist3', keylist3)
// console.log(keylist3)
this.setData({
keylist3: keylist3
})
var keyInto = e.currentTarget.dataset.keyname
// console.log(e.currentTarget.dataset.keyname)
// 页面跳转
wx.navigateTo({
url: 'list/list?key=' + keyInto
})
},
keyTextB:function(e){
var keyInto = e.currentTarget.dataset.keyname;
// 页面跳转
wx.navigateTo({
url: 'list/list?key=' + keyInto
})
},
// 控制记忆关键词的删除
keyDelte:function(){
// var keylist = this.data.keylist;
var keylist3=[];
wx.setStorageSync('keylist3', keylist3)
this.setData({
keylist3: keylist3
})
},
//-----------------------------------------------
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 初始化数据请求
var that=this;
var keylist1 = this.data.keylist1;
console.log(keylist1)
wx.request({
url: 'https://www.didu86.com/Clothes-manager-web/querySearch',
data: {
appkey: '5e5ju20na345sdf4nw361qb9789asdf',
key: "test",
type: "data",
cid:1
},
success: function (res) {
var result = res.data;
keylist1 = result
// console.log(result);
that.setData({
keylist1: keylist1,
keylist3: wx.getStorageSync('keylist3')
})
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------
wxml
<view class='search-s-container'>
<!-- 1搜索 -->
<view class='header-box flexba'>
<!-- 收索框 -->
<view class="header">
<input class="search" placeholder='按品牌/类目搜索' placeholder-style="color:#C1C1C1" bindinput='inputValue'></input>
<icon type="search" size="15" color="#BFBFBF" />
</view>
<view class='header-title' bindtap='inputFn'>搜索</view>
</view>
<!-- 2分类菜单关键词 -->
<view class='header-content'>
<view class='search-menu flex'>
<view class='menu-left'>
<view class="{{keyselecte?'seactive':''}}" bindtap='keyList' data-idx="1">品牌</view>
</view>
<view class='menu-right'>
<view class="{{keyselecte?'':'seactive'}}" bindtap='keyList' data-idx="2">类目</view>
</view>
</view>
<view class='search-key'>
<view wx:if="{{keyselecte?true:''}}" class='key-list'>
<view class='key-list-box flexa'>
<image src='../../imgs/search/search_1.png'></image>
<text>{{key1}}</text>
</view>
<view class='key-list-text flexw'>
<view wx:key="key1" wx:for="{{keylist1}}" wx:for-index="index">
<text data-keyid="{{index}}" data-keyname='{{item.key}}' bindtap='keyText'>{{item.key}}</text>
</view>
</view>
</view>
<view wx:if="{{keyselecte?'':true}}" class='key-list'>
<view class='key-list-box flexa'>
<image src='../../imgs/search/search_1.png'></image>
<text>{{key2}}</text>
</view>
<view class='key-list-text flexw'>
<view wx:key="key2" wx:for="{{keylist2}}" wx:for-index="index">
<text data-keyid="{{index}}" data-keyname='{{item.key}}' bindtap='keyText'>{{item.key}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 3关键词记忆-->
<view class='header-memory'>
<view class='memory-title flexba'>
<view class='memory-title-left flexa'>
<image src='../../imgs/search/search_2.png'></image>
<text>历史搜索</text>
</view>
<view class='memory-title-right' bindtap='keyDelte'>
<image src='../../imgs/search/search_3.png'></image>
</view>
</view>
<view class='key-list-text flexw'>
<view wx:key="key3" wx:for="{{keylist3}}" data-keyname='{{item.key}}' bindtap='keyTextB'>
<text wx:if="{{item.key}}">{{item.key}}</text>
</view>
</view>
</view>
</view>
//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
wxss
page {
">#ffffff;
}
/* 1搜索 */
.header-box{
padding-right: 24rpx;
}
/* 收索 */
.header {
display: -webkit-flex;
justify-content: center;
position: relative;
width: 650rpx;
padding: 20rpx 24rpx;
box-sizing: border-box;
z-index: 1;
align-items: center;
}
.header icon {
margin: auto 15rpx;
position: absolute;
top: 40rpx;
left: 35rpx;
}
.header .search {
width: 100%;
height: 38rpx;
color: #888;
font-size: 28rpx;
line-height: 48rpx;
padding: 10rpx;
border-radius: 35rpx;
background: #fff;
padding-left: 70rpx;
">#F7F7F7;
}
.header-title{
font-size: 34rpx;
}
/* 2分类菜单 */
.search-menu{
padding-top: 30rpx;
border-bottom: 1px solid #ff4342;
}
.search-menu>view{
width: 50%;
}
.menu-left>view,.menu-right>view{
width: 120rpx;
margin: 0 auto;
height: 80rpx;
text-align: center;
box-sizing: border-box;
border-bottom: 7rpx solid transparent;
color: #333333;
}
.search-menu .seactive{
border-color: #ff4342;
color: #ff4342;
}
/* 关键词 */
.search-key{
margin-top: 35rpx;
}
.key-list{
padding-bottom: 20rpx;
}
.key-list-box{
height: 80rpx;
padding: 0 24rpx;
}
.key-list-box image{
width: 32rpx;
height: 42rpx;
}
.key-list-box text{
margin-left: 20rpx;
font-size: 32rpx;
color: #333333;
}
.key-list-text{
padding: 0 24rpx;
}
.key-list-text text{
">#F7F7F7;
border-radius: 30rpx;
padding: 15rpx 30rpx;
margin: 10rpx 10rpx;
color: #333333;
display: block;
font-size: 30rpx;
}
.memory-title{
padding: 0 24rpx;
}
.memory-title-left {
height:100rpx;
}
.memory-title-left image{
width: 48rpx;
height: 48rpx;
}
.memory-title-left text{
margin-left: 20rpx;
font-size: 30rpx;
color: #333333;
}
.memory-title-right{
width: 60rpx;
height: 50rpx;
padding-left: 28rpx;
}
.memory-title-right image{
width: 32rpx;
height: 32rpx;
}
