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

微信小程序开发交流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.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.idvar 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
}

php实现代码

<?phpheader("Content-Type:text/html;charset=utf8"); header("Access-Control-Allow-Origin: *"); //解决跨域header('Access-Control-Allow-Methods:POST');// 响应类型  header('Access-Control-Allow-Headers:*'); // 响应头设置 $link=mysql_connect("localhost","root","root"); mysql_select_db("shige", $link); //选择数据库mysql_query("SET NAMES utf8");//解决中文乱码问题$str = $_POST['str'];//SQL查询语句 SELECT * FROM 表名  LIKE 模糊搜索的变量$q="SELECT * FROM curriculum WHERE CONCAT_WS('',school,college,major,mtype,title) LIKE '%{$str}%'";$rs = mysql_query($q); //获取数据集if(!$rs){die("数据库没有数据!");}//循环读取数据并存入数组对象$dlogs;$i=0;while($row=mysql_fetch_array($rs)){$dlog['title']= $row["title"];$dlog['mtype']= $row["mtype"];$dlog['name']= $row["name"];$dlog['mfile']= $row["mfile"];$dlog['myear']= $row["myear"];$dlog['school']= $row["school"];$dlog['college']= $row["college"];$dlog['major']= $row["major"];$dlog['time']= $row["time"];$dlogs[$i++]=$dlog;}//以json格式返回html页面echo urldecode(json_encode($dlogs));
?>

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

修改微信小程序单选，复选框样式
xml <label class="checkbox"><checkbox checked="checked" disabled />获 ...
微信小程序支付功能用服务器吗,微信小程序支付功能服务器端（TP5.1）实现...
首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下在使用SDK之前我们需要对 WxPay.Config.php 进行配置 namespace ...
详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
前言: 我在我的博客小程序使用微信小程序分享功能图片不符合5:4问题 ,对其原理扫描下面二维码,可以体验哦准备在需要自定义分享的页面设置canvas 组件目录准备详解思路定义总函数 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
python个人微信支付接口_Python实现微信小程序支付功能
正文由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
微信小程序之toast等弹框提示
微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT). 看下有关参数说明: 代码很简单: wx.showToast({title: '成功' ...

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

承接微信小程序开发。扫码加微信。

正文：

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

最新文章

热门文章