微信 小程序组件 搜索分类 带缓存(终极 上线版)

 

 

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;

}

转载于:https://www.cnblogs.com/dianzan/p/7908839.html