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


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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
css图片自适应大小
Nov 28 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
vue项目引入字体.ttf的方法
Sep 28 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类(查找/修改)xml文档
2013/03/26 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Python使用type动态创建类操作示例
2020/02/29 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
旅游个人求职信范文
2014/01/30 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
餐馆开业致辞
2015/08/01 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA