微信小程序开发交流qq群 173683895 、 526474645 ；
正文：
上效果图:
<pre class="has">
<code class="language-html"> <view class='page_row' bindtap="suo">
<view class="search">
<view class="df search_arr">
<pre class="has">
<code class="language-css">.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;
}
<pre class="has">
<code class="language-javascript"> suo: function (e) {
wx.navigateto({
url: '../search/search',})
},
<pre class="has">
<code class="language-html">
<view class="search page_row">
<pre class="has">
<code class="language-html">
<pre class="has">
<code class="language-javascript">var app = getApp();
var searchValue =''
// pages/search/search.js
Page({
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
});
},});
}
});
<pre class="has">
<code class="language-html">
<pre class="has">
<code class="language-html">
<pre class="has">
<code class="language-css">/ 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}
