微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

下面是 "微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)" 的完整攻略：

1. 制作搜索框样式

首先，在小程序页面的wxml文件中，可以添加一个input标签，来实现搜索框的样式。一般情况下，搜索框的样式包含一个输入框和一个搜索按钮，可以像下面这样定义：

<view class="search-box">
  <input placeholder="输入关键字搜索" bindconfirm="search" />
  <button bindtap="search"><image src="/images/search.png"/></button>
</view>

其中，search属性绑定的是当用户点击搜索按钮时触发的事件处理函数，属性值为search；bindconfirm属性则绑定的是当用户点击键盘上的完成按钮时触发的事件处理函数，属性值为search。这两个属性都可以绑定同一个事件处理函数，实现同样的效果。

在样式文件中，可以定义search-box样式名：

.search-box{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  border-radius: 5px;
  background: #e0e0e0;
  height: 50rpx;
}

.search-box input{
  flex: 1;
  font-size: 28rpx;
  padding-left: 10rpx;
  border: none;
  outline: none;
}

.search-box button{
  width: 80rpx;
  height: 50rpx;
  border: none;
  background: none;
}

2. 跳转到搜索结果页面

在完成搜索框的样式后，就需要实现跳转功能，将用户输入的关键字发送到后台进行搜索，并将搜索结果展示给用户。这里我们可以利用小程序提供的页面跳转API：navigateTo。

在事件处理函数search中，可以获取用户输入的关键字，然后将关键字作为参数传递给搜索结果页面searchResult。示例如下：

search: function(e){
  let keyword = e.detail.value;
  wx.navigateTo({
    url: '/pages/searchResult/searchResult?keyword=' + keyword,
  })
}

其中，通过e.detail.value可以获取到用户输入的关键字。在跳转页面时，将关键字作为url参数传递给searchResult页面。

3. 在搜索结果页面展示搜索结果

在searchResult页面中，需要获取到用户传递过来的关键字，并调用后台API进行搜索，将搜索结果展示给用户。

Page({
  data: {
    keyword: '',
    searchResult: [],
  },

  onLoad: function(options) {
    // 获取用户输入的关键字
    this.setData({
      keyword: options.keyword,
    })
    // 调用搜索API，并将搜索结果存储到searchResult中
    wx.request({
      url: 'http://localhost:3000/search',
      method: 'GET',
      data:{
        keyword: options.keyword,
      },
      success: (res)=> {
        this.setData({
          searchResult: res.data,
        })
      },
      fail: (err)=> {
        console.log(err);
      }
    })
  },

})

在onLoad函数中，首先获取用户传递的关键字，然后调用相关的后台API进行搜索，并将结果存储到data中的searchResult中。在searchResult页面中使用wx:for标签遍历searchResult，将搜索结果展示给用户即可。

通过以上代码实现，用户可以输入关键字进行搜索，跳转到关键字对应的搜索结果页面，并查看搜索结果。

示例代码见 searchDemo。

4. 搜索框样式示例

在这里，我提供两种不同的搜索框样式，供大家参考。

样式一: 带清空按钮的搜索框

<view class="search-input-box">
  <image src="/images/search.png" class="search-icon"></image>
  <input class="search-input" placeholder="请输入搜索内容" bindinput="onInput" value="{{keyword}}" placeholder-style="color:#999;"></input>
  <image wx:if="{{keyword}}" src="/images/cancel.png" class="cancel-icon" bindtap="clearInput"></image>
  <button class="search-btn" bindtap="clickSearch">搜索</button>
</view>

样式二: 带搜索框动画的搜索框

<view class="search-box" bindtap="onSearchBoxClick">
  <image src="/images/search.png" class="search-icon"></image>
  <view class="search-input-box">
    <input class="search-input" placeholder="请输入搜索内容" bindinput="onInput" value="{{keyword}}" placeholder-style="color:#999;"></input>
    <image wx:if="{{keyword}}" src="/images/cancel.png" class="cancel-icon" bindtap="clearInput"></image>
  </view>
</view>

以上是 "微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)" 的详细攻略。