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


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面象对象成员、共享成员变量实验
Nov 19 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
javascript闭包的理解
Apr 01 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
JavaScript表单验证实现代码
May 22 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 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配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
php验证session无效的解决方法
2014/11/04 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
php pdo操作数据库示例
2017/03/10 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
深入理解node.js http模块
2018/01/24 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python 数据结构之队列的实现
2017/01/22 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
2014年教师节演讲稿
2014/09/03 职场文书
联欢会开场白
2015/06/01 职场文书
标枪加油稿
2015/07/22 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技