先看看效果图
比较简单,不做过多的解释了,直接看代码:
html
<!--pages/commodity/commodity-search/index.wxml-->
<!-- 自定义顶部导航 S -->
<view class="navbar custom-class" style='height:{{navHeight}}px;'>
<view class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;'>
<image style="width: 17.5px; height: 18px; padding-top: 3px;" src="{{leftIcon}}" catchtap="goBack"></image>
</view>
<view class='navbar-title' style='top:{{navTop}}px'>
<view class="search-input">
<span class="search-con">
<view class="center-30f2b4d">
<!-- 自定义区域 -->
<image class="icon" src="{{searchIcon}}" catchtap="searchbegin" data-postname="{{inputValue}}"></image>
<input class="search-size" confirm-type="search" value="{{inputValue}}" type="text" bindinput="getInputValue" placeholder="搜索品牌或商品" placeholder-class="phcolor" bindconfirm="searchbegin" data-postname="{{inputValue}}"></input>
</view>
</span>
</view>
</view>
</view>
<!-- 自定义顶部导航 E -->
<view class="read-in" style="margin-top: {{navHeight}}px">
<!-- 最近搜索 S -->
<view class="headline" wx:if="{{historyStorage.length!=0}}" hidden="{{historyStorageShow?false:true}}">
<view class="head-headline justify">
<view class="headline-size">搜索历史</view>
<view class="icon-right size" catchtap="remove"><image src="https://ico.dongtiyan.com/tu-129.png"></image></view>
</view>
<!-- 最近搜索内容 S -->
<view class="lately-main">
<view class="chunk" wx:for="{{historyStorage}}" wx:key="index" bindtap='searchbegin' data-index='{{index}}' data-postname="{{item}}">
<text>{{item}}</text>
</view>
</view>
<!-- 最近搜索内容 E -->
</view>
<!-- 最近搜索 E -->
<!-- 热门搜索 S -->
<view class="headline">
<view class="head-headline">
<view class="headline-size">搜索发现</view>
</view>
<!-- 热门推荐内容 S -->
<view class="lately-main">
<view class="chunk" wx:for="{{hotsearch1}}" wx:key="index" catchtap="searchbegin" bindtap="getInputValue" data-postname="{{item.title}}">
<text>{{item.title}}</text>
</view>
</view>
<!-- 热门推荐内容 E -->
</view>
<!-- 热门搜索 E -->
</view>
<!--搜索结果-->
<view class="searchresult" wx:if="{{inputValue != ''}}" hidden="{{searchresult}}" >
<view class="result" wx:for="{{searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{{item.result}}">
<view>{{item.result}}</view>
<image src="{{upperLeftArrow}}"></image>
</view>
</view>
<view class="searchresult" wx:if="{{inputValue != ''}}" hidden="{{searchresult?false:true}}" >
<view class="result" wx:for="{{searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{{item.result}}">
<view>{{item.result}}</view>
<image src="{{upperLeftArrow}}"></image>
</view>
</view>
最后下面的搜索结果我没用,单独拉出来了一个页面做结果页,看自己需求改一下就好
wxss
/* pages/commodity/commodity-search/index.wxss */
page {
background: white;
}
.navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 10;
flex-shrink: 0;
}
.navbar-title {
width: 100%;
box-sizing: border-box;
padding-left: 40px;
padding-right: 120px;
height: 33px;
line-height: 33px;
position: fixed;
left: 0;
z-index: 10;
color: #333;
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: flex;
align-items: center;
}
.navbar-action-wrap {
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
left: 10px;
z-index: 11;
line-height: 1;
padding-top: 4px;
padding-bottom: 4px;
position: fixed;
}
.navbar-action-group {
border-radius: 20px;
overflow: hidden;
}
.navbar-action_item {
padding: 3px 0;
color: #333;
}
.navbar-action-group .navbar-action_item {
border-right: 1px solid #f0f0f0;
padding: 3px 14px;
}
.icon-right image {
width: 25rpx;
height: 26rpx;
}
.navbar-action-group .last {
border-right: none;
}
.navbar-title-size {
font-size: 10px;
margin-right: 20rpx;
align-self: center;
margin: 0 auto;
}
.navbar-title-size.active {
color: red;
border-bottom: 2px solid red;
}
.scroll-box {
position: absolute;
height: 100%;
}
.search-input {
width: 100%;
height: 28px;
line-height: 28px;
background: #f6f6f6;
border-radius: 30rpx;
/* margin-top: 2px; */
font-size: 25rpx;
}
.search-con {
display: flex;
align-items: center;
}
.search-con .center-30f2b4d {
height: 28px;
line-height: 28px;
flex: 1;
display: flex;
align-items: center;
}
.search-con .center-30f2b4d .icon {
width: 15px;
height: 15px;
align-self: center;
margin: 0 10px;
}
.search-con .center-30f2b4d .search-size {
width: 70%;
font-size: 12px;
font-family: "微软雅黑";
}
.phcolor {
color: #999999;
}
/* nav E */
/* 标题部分 */
.read-in {
padding: 0 40rpx;
}
.headline {
padding-top: .5rem;
}
.head-headline {
width: 100%;
height: 45rpx;
position: relative;
display: flex;
font-size: 28rpx;
font-weight: bold;
align-items: center;
justify-content: space-between;
}
/* 内容部分 */
.lately-main {
margin-top: 20rpx;
overflow: hidden;
}
.lately-main .chunk {
display: inline-block;
font-size: 24rpx;
line-height: 20rpx;
padding: 10rpx 21rpx;
background: #f5f5f5;
margin-right: 20rpx;
border: 1px solid #DCDCDC;
border-radius: 18.5rpx;
color: #666666;
margin-bottom: 26rpx;
/* float: left; */
}
.searchresult {
margin-top: 20px;
position: absolute;
top: 55px;
left: 0;
width: 100%;
background: #fff;
}
.result {
height: 50px;
line-height: 50px;
text-align: left;
border-bottom: 1px solid #eee;
padding: 0 30rpx;
color: #333;
font-family: "微软雅黑";
font-size: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.result image {
width: 50rpx;
height: 50rpx;
}
js 核心代码
// pages/commodity/commodity-search/index.js
const App = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
// 自定义顶部导航
navHeight: App.globalData.navHeight,
navTop: App.globalData.navTop,
// 图标
leftIcon: "https://ico.dongtiyan.com/tu-130.png",
searchIcon: "https://ico.dongtiyan.com/tu-99.png",
recommend: [ //热门推荐
{
title: "冰箱"
},
{
title: "红魔手机"
},
{
title: "洗衣机"
},
{
title: "电视机"
},
{
title: "冰箱 双门"
},
{
title: "海尔洗衣机 滚筒"
},
{
title: "手机自营"
},
{
title: "小天鹅洗衣机全自动"
},
{
title: "手机"
},
{
title: "笔记本"
}
],
historyStorage: [], //历史搜索
historyStorageShow: false,
hotsearch1: [{ title: "短裤" }, { title: "背带裙" }, { title: "牛仔裤男" }, { title: "运动 休闲男鞋" }, { title: "蕾丝连衣裙" }, { title: "电视" }, { title: "长裙" }, { title: "oppo" }, { title: "蓝牙耳机" }, { title: "女包" }, { title: "格力空调" }, { title: "魅族" }],
inputValue: "", //输入框输入的值
replaceValue: "", //替换输入框的值
eye: true, //显示隐藏
searchresult: false,
// searchResult: [{ result: "苹果手机" }, { result: "手机支架" }, { result: "手机自营" }, { result: "手机套" }, { result: "手机膜" }, { result: "手机卡" }, { result: "手机报" }, { result: "苹果手机壳" }, { result: "手机车载支架" }]//虚拟的查询结果
},
// 点击返回上一级
goBack: function () {
// let pages = getCurrentPages(); //获取小程序页面栈
// let beforePage = pages[pages.length - 2]; //获取上个页面的实例对象
// beforePage.setData({
// txt: "修改数据了"
// })
// beforePage.goUpdate(); //触发上个页面自定义的go_update()方法
wx.navigateBack({
delta: 1
})
},
/**
* 获取顶部固定高度
*/
attached: function () {
this.setData({
navHeight: App.globalData.navHeight,
navTop: App.globalData.navTop,
})
},
/**
* 热门搜索显示隐藏
*/
reye: function () {
this.setData({
eye: !this.data.eye
})
},
/**
* 清除
*/
remove: function () {
var _this = this
wx: wx.showModal({
content: '确认清除所有历史记录?',
success: function (res) {
if (res.confirm) {
wx: wx.removeStorage({
key: 'historyStorage',
success: function (res) {
_this.setData({
historyStorage: []
})
wx.setStorageSync("historyStorage", [])
},
})
} else {
console.log("点击取消")
}
},
})
},
/**
* 获取input的值
*/
getInputValue(e) {
// console.log("获取到了", e.currentTarget.dataset.value)
// console.log("获取value值",e.detail) // {value: "ff", cursor: 2}
this.setData({
inputValue: e.detail.value
})
// this.setData({
// searchresult: true,
// })
},
/**
* 点击搜索提交跳转并存储历史记录
*/
searchbegin: function (e) {
let _this = this
var data = e.currentTarget.dataset;
_this.data.replaceValue = e.currentTarget.dataset.postname
// _this.data.replaceValue =
wx: wx.setStorage({
key: 'historyStorage',
data: _this.data.historyStorage.concat(_this.data.inputValue).reverse(),
data: _this.data.historyStorage.concat(_this.data.replaceValue).reverse()
})
// console.log(_this.data.inputValue)
// console.log(_this.data.historyStorage)
// console.log(data['postname'])
if (data['postname'] == '') {
wx.showToast({
title: '请先输入品牌或商品',
icon: 'none'
})
} else {
wx.redirectTo({
url: '../../commodity/commodity-search-list/index?postName=' + data['postname'] + '&searchtype=' + _this.searchtype
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 历史搜索
let that = this;
that.searchtype = options.searchtype;
wx.getStorage({
key: 'historyStorage',
success: function (res) {
// console.log(res.data)
that.setData({
historyStorageShow: true,
historyStorage: res.data
})
}
})
this.setData({
inputValue: options.inputValue
})
this.data.inputValue = options.inputValue
// console.log(this.data.inputValue)
},
goUpdate: function () {
this.onLoad()
// console.log("我更新啦")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
json 自定义顶部导航配置custom
{
"navigationStyle": "custom",
"usingComponents": {}
}app.js
App({
globalData: {
navHeight: 0,
navTop: 0,
windowHeight: 0
},
onLaunch: function (options) {
var _this = this;
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
//导航高度
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top,
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
this.globalData.navHeight = navHeight;
this.globalData.navTop = navTop; //navTop
this.globalData.windowHeight = res.windowHeight;
},
fail(err) {
console.log(err);
},
})
},
})
以上就是所有代码,直接拿过来用就好,
