[微信小程序]搜索功能实现,搜索框样式

欢迎加入微信小程序开发交流QQ群(173683895)'首先上效果图:

一:搜索框功能实现

1.在首页做一个搜索框的样式并实现跳转到搜索页面

  <view class='page_row' bindtap="suo">    <view class="search">      <view class="df search_arr">        <icon class="searchcion" size='20' type='search'></icon>        <input class="" disabled placeholder="请输入关键字" value="{{searchValue}}"/>      </view>    </view>    <view class='sousuo'>搜索</view>  </view>

.search{  width: 80%;}.search_arr {  border: 1px solid #d0d0d0;  border-radius: 10rpx;  margin-left: 20rpx;}.search_arr input{  margin-left: 60rpx;  height: 60rpx;  border-radius: 5px;}.bc_text {  line-height: 68rpx;  height: 68rpx;  margin-top: 34rpx;}.sousuo {  margin-left: 15rpx;  width: 15%;  line-height: 150%;  text-align: center;  border: 1px solid #d0d0d0;  border-radius: 10rpx;}.page_row{  display: flex;  flex-direction: row}.searchcion {  margin: 10rpx 10rpx 10rpx 10rpx;  position: absolute;  left:25rpx;  z-index: 2;  width: 20px;  height: 20px;  text-align: center;}

js.点击跳转到搜索的页面

  suo: function (e) {    wx.navigateTo({      url: '../search/search',    })  },

2.搜索页面实现搜索功能

<!--pages/search/search.wxml--><view class="search page_row">  <input class="df_1" placeholder="请输入你有搜索的内容" value="{{searchValue}}" bindinput="searchValueInput" />  <button bindtap="suo" data-id='1'>    媒婆  </button>  <button bindtap="suo" data-id='2'>    单身  </button></view><view class="search_no" wx:if="{{!centent_Show}}">  <text>很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~</text></view><import src="../index/card/card.wxml" /><template is="nanshen_card" data="{{nanshen_card,img}}" />

var app = getApp();var searchValue =''// pages/search/search.jsPage({  data: {    centent_Show: true,    searchValue: '',    img: '',    nanshen_card:''  },  onLoad: function () {  },  searchValueInput: function (e) {    var value = e.detail.value;    this.setData({      searchValue: value,    });    if (!value && this.data.productData.length == 0) {      this.setData({        centent_Show: false,      });    }  },  suo:function(e){    var id= e.currentTarget.dataset.id    var program_id = app.program_id;    var that = this;    wx.request({      url: 'aaa.php',//这里填写后台给你的搜索接口      method: 'post',      data: { str: that.data.searchValue, program_id: program_id, style:id },      header: {        'content-type': 'application/x-www-form-urlencoded'      },      success: function (res) {        if(res.data.length ==0){          that.setData({            centent_Show: false,          });        }        that.setData({          nanshen_card: res.data,        });      },      fail: function (e) {        wx.showToast({          title: '网络异常！',          duration: 2000        });      },    });  }});


/* pages/search/search.wxss */@import "../index/card/card";.searchcion{    width: 24px;    height: 24px;    text-align: center;    margin-top: 5rpx}.search{    padding: 1% 3%;    background: #D0D0D0;}.search input{    width: 85%;    border-radius: 5px;    background: #fff;    border: none;    font-size: 12px;    padding:1% 2.5%;    margin-right: 5px;    }.search button{    line-height:30px;    text-align: center;    border: none;    font-size: 28rpx;    background: white}