首页点击搜索跳转到搜索详情页，实现关键字搜索功能

首页搜索

//首页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;

}