微信 小程序组件 搜索分类 带缓存(终极 上线版)
2024-05-20 22:33:08
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
微信 小程序组件 搜索分类 带缓存(终极 上线版)相关推荐
- 微信小程序 - 实现搜索界面(带热搜、搜索历史和结果页)
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类 小程序码 效果图: wxml 代码: <van-search value="{{ i ...
- 微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器 效果 组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
- 原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件 首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页 搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
- 微信小程序组件(标签)—码虫带你飞
微信小程序组件(标签) 组件文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 常用布局标签 <view></view&g ...
- 微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件 组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件 组件是视图层的基本组成单元. 组件自带一 ...
- 【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件 微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念 什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...
- 微信小程序 微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
- 微信小程序 实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果 一.效果图 二.实现流程: 1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表 key = 小程序 2.处理结果列表:在 ...
- 2023新版 多功能去水印工具微信小程序源码_带流量主功能(已更新)
简介: 2023新版 多功能去水印工具微信小程序源码_带流量主功能 自带去水印接口的多功能小程序 支持各大平台短视频去水印 支持保存封面,图集,标题等等 支持本地图片去水印 支持图片拼接 支持九宫格切 ...
最新文章
- docker删除所有容器_如何在Linux上创建，列出和删除Docker容器
- 删除元素（LintCode）
- 密码技术--证书及go语言生成自签证书
- PHP操作redis
- easyui textbox 设置只读不可编辑状态
- JAVA 设计模式 观察者模式
- 镜像服务器文件实时监控同步程序
- 开发.NET Core NuGet包并实现CI/CD
- 0基础必看：如何轻松成为C语言高手
- 为什么招聘高级前端开发这么难？
- 想赚钱？先把底层逻辑搞清楚
- libvirt 创建的文件
- 新智慧杂志新智慧杂志社新智慧编辑部2022年第30期目录
- 中国提取市场趋势报告、技术动态创新及市场预测
- 如何配置nginx服务器中access_log日志分析？
- Yao‘s GC 的通信最优解：Half Gate
- TechBeat: 强化学习ppo让决策智能演化出无限可能
- 拓展kmp（2020新年第一篇博客 学无止境冲啊）
- 致远SPM解决方案之费用管理
- Ubuntu mysql 重置密码