首页点击搜索跳转到搜索详情页，实现关键字搜索功能
首页搜索
//首页wxml
<view class='searchBar' bindtap='search' >
<icon class='iconfont icon-search-1-copy'></icon>
<input type='text' class='search' placeholder='搜索商品'></input> </view>
//首页js实现页面跳转，跳转到搜索页面
search: function(e){
// var id = e.currentTarget.dataset.id;
wx.navigateTo({ url: '../../pages/search/search', })
}
搜索页面 样式没太写 有点丑
搜索详情页面
<view class="serach_a">
<view class='searchBar'>
<icon class='iconfont icon-search-1-copy'></icon>
<!-- 回车搜索 bindconfirm="searchSubmit" 可查看微信官方文档API -->
<input type='text' class='search' placeholder='搜索商品' value="{{search_txt}}" bindinput='getSearch_txt' bindconfirm="searchSubmit" ></input>
<button formType="submit" class="search_btn" bindtap="searchSubmit">搜索</button> </view>
<view class='indexGoods' wx:key="{{index}}">
<view class='goods'>
<view class='goodsList' wx:for="{{list}}" wx:key="{{index}}" bindtap="" data-id="{{item.id}}">
<image class='goodsPic' src="{{item.imgurl}}"></image>
<view class='goodsListMsg'> <view class='goodsListName'>{{item.name}}</view>
<view class='goodsListPirce'> <text class='price'>¥ {{item.price}}</text>
</view> </view> </view> </view> </view>
搜索不到商品时的缺省内容
<view wx:if = "{{hasList == 1}}"> <view class="list_none">抱歉 试试搜索其他商品吧~</view> </view>
</view>
详情页面js
data: {
list:[ ],
name:"",
pageSize:"",
pageNum:"",
search_txt:"",
hasList: 0
},
getSearch_txt: function(e) {
this.setData({
search_txt: e.detail.value
})
console.log('搜索框里面的值' + e.detail.value)
},
searchSubmit: function(options) {
var that = this;
var search_txt = that.data.search_txt;
console.log(11)
console.log(search_txt)
wx.request({
url: ''//请求的接口
method: 'post',
data: {name: search_txt,pageNum: 1,pageSize:1},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res)
that.setData({
// list:res.data.data
list:res.data.data.list
})
console.log(res.data.data.length)//没有商品时提示信息
if (res.data.data.list.length == 0) {
that.setData({
hasList: 1
})
} else {
// console.log('123')
that.setData({
// list: data,
selectAllStatus: false,
hasList: 0,
show_edit: true
})
}
}
})
},
首页wxss
.searchBar{margin: 10rpx 30rpx;
display: flex;
align-items: center;
position: relative;
height: 70rpx;
}
.searchBar .search{
height:70rpx;
border-radius:20rpx;
background-color:#e9e8ee;
/* opacity:0.6; */
padding-left:80rpx;
width: 100%;
}
.searchBar icon{
position: absolute;
z-index:2;
left:20rpx;
color: #999;
line-height: 70rpx;
}
搜索详情页wxss
.searchBar{
/* margin: 20rpx 30rpx; */
margin: 20rpx 30rpx 0rpx 30rpx;
display: flex;
align-items: center;
position: relative;
height: 70rpx;
}
.searchBar .search{
height:70rpx;
border-radius:20rpx;
background-color:#e9e8ee;
/* opacity:0.6; */
padding-left:80rpx;
width: 100%;
}
.searchBar .search_btn{
margin-left: 5px;
width: 25%;
height: 75rpx;
font-size:32rpx;
background: #56b273;
color: #fff;
border-radius: 20rpx;
padding: 0;
line-height: 70rpx;
}
.searchBar icon{
position: absolute;
z-index:2;
left:20rpx;
color: #999;
line-height: 70rpx;
}
网友评论