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


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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 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 全角转半角实现代码
2010/05/16 PHP
基于php缓存的详解
2013/05/15 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
js如何验证密码强度
2020/03/18 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
用Python编写简单的定时器的方法
2015/05/02 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Python数据可视化图实现过程详解
2020/06/12 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
甜美蛋糕店创业计划书
2014/01/30 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
实训报告范文大全
2014/11/04 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python