页面
重点:键盘呈现搜索按钮,input框绑定值 value 等于变量
<input type="text" name="search" confirm-type='search' placeholder="请输入关键词" value="{{search_value}}" bindinput="inputValue"
bindconfirm="confirm" />
html
<view class="orderSearchContain">
<view class='orderSearch'>
<view class='top jqflex flex-align-cen flex-just-bet'>
<view class='inputBox jqflex flex-align-cen'>
<image src="{{imgurl}}l_shousuo.png"></image>
<input type="text" name="search" confirm-type='search' placeholder="请输入关键词" value="{{search_value}}" bindinput="inputValue"
bindconfirm="confirm" />
</view>
<view class="right flex flex-just-cen flex-ali-cen" bindtap='go_result'>
搜索
</view>
</view>
<view class='historyBox'>
<view class='history'>
<view class='title jqflex flex-align-cen flex-just-bet'>
<view>历史搜索</view>
<image src="{{imgurl}}c-shanchu.png" bindtap='del'></image>
</view>
<view class='box jqflex'>
<view bindtap="goSearch" data-val="{{item}}" wx:for="{{historyList}}" wx:key="{{index}}">{{item}}</view>
</view>
<view style="color: #999;" wx:if="{{historyList.length==0}}">暂无历史搜索记录</view>
</view>
</view>
<view class='hotBox' wx:if="{{hotList.length>0}}">
<view class='hot'>
<view class='title'>
<view>热门推荐</view>
</view>
<view class='box jqflex'>
<view bindtap="goSearch" data-val="{{item}}" wx:for="{{hotList}}" wx:key="{{index}}">{{item}}</view>
</view>
</view>
</view>
</view>
</view>
less
.orderSearchContain{
width: 100%;
height: 100%;
background: #f5f5f5;
font-size:30rpx;
.top{
height: 88rpx;
background: #fff;
padding:0 24rpx;
padding-left:60rpx;
.inputBox{
width: 515rpx;
height: 60rpx;
background:rgba(245,245,245,1);
opacity:0.8;
border-radius:28rpx;
padding:0 24rpx;
image{
width: 44rpx;
height: 44rpx;
margin-right: 20rpx;
}
}
.right{
width:128rpx;
height: 55rpx;
color:#fff;
background:rgba(252,94,98,1);
border-radius:28rpx;
}
}
.historyBox{
width: 100%;
padding:0 24rpx;
background: #f5f5f5;
margin-top:16rpx;
}
.history{
background: #fff;
border-radius: 10rpx;
min-height: 400rpx;
width:100%;
padding:0 20rpx;
.title{
width: 100%;
height:90rpx;
image{
width: 44rpx;
height: 42rpx;
}
}
.box{
flex-wrap: wrap;
padding:20rpx 0rpx;
>view{
margin-right: 20rpx;
padding:12rpx 20rpx;
border-radius:26rpx;
background: #f5f5f5;
margin-bottom: 20rpx;
}
}
}
.hotBox{
width: 100%;
padding:0 24rpx;
.hot{
width:100%;
padding:0 20rpx;
.title{
width: 100%;
height:90rpx;
line-height: 90rpx;
}
.box{
flex-wrap: wrap;
width:100%;
padding:20rpx 0rpx;
>view{
width:33.3%;
margin-bottom: 40rpx;
text-align: center;
}
}
}
}
}
js
// pages/my/order/orderSearch/orderSearch.js
const app = getApp()
const request = require('../../../utils/request.js');
Page({
/**
* 页面的初始数据
*/
data: {
imgurl: app.globalData.imgurl,
historyList: [], // 历史记录
hotList: ['菩提珠串', '金石/拓片', '翡翠原石', '和田玉', '邮票', '珍珠'], // 热门推荐
search_value: '' // 搜索关键词
},
//搜索关键词监听
inputValue(e) {
this.setData({
search_value: e.detail.value
})
},
//点击键盘上搜索按钮 去搜索页面
confirm() {
this.go_result();
},
//点击搜索,去搜索页面
go_result() {
let arr = this.data.historyList
if (!arr.includes(this.data.search_value)) {
arr.push(this.data.search_value)
this.setData({
historyList: arr
})
wx.setStorageSync('historyList', this.data.historyList)
}
wx.navigateTo({
url: '/pages/goods_list/goods_list?searchVal=' + this.data.search_value,
})
},
//点击删除按钮
del() {
this.setData({
historyList: []
})
wx.removeStorageSync('historyList')
},
// 点击历史记录和热门推荐
goSearch(e) {
let arr = this.data.historyList
if (!arr.includes(e.currentTarget.dataset.val)) {
arr.push(e.currentTarget.dataset.val)
this.setData({
historyList: arr
})
wx.setStorageSync('historyList', this.data.historyList)
}
wx.navigateTo({
url: '/pages/goods_list/goods_list?searchVal=' + e.currentTarget.dataset.val,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (wx.getStorageSync('historyList')) {
this.setData({
historyList: wx.getStorageSync('historyList')
})
}
},