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


Posted in Javascript onMarch 10, 2020

上效果图:

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

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

一:搜索框功能实现

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.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
}

php实现代码

<?php
 header("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));
?>

总结

到此这篇关于微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)的文章就介绍到这了,更多相关微信小程序搜索内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
浅析javascript的return语句
Dec 15 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
微信小程序异步处理详解
Nov 10 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
微信小程序实现搜索功能
Mar 10 #Javascript
原生JS实现烟花效果
Mar 10 #Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 #Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 #Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 #Javascript
js模拟实现烟花特效
Mar 10 #Javascript
JS实现放烟花效果
Mar 10 #Javascript
You might like
第四章 php数学运算
2011/12/30 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python使用py2exe打包程序介绍
2014/11/20 Python
Python性能优化技巧
2015/03/09 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
python中封包建立过程实例
2021/02/18 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
自主招生自荐信指南
2014/02/04 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
英语复习计划
2015/01/19 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
详解Python中__new__方法的作用
2022/03/31 Python