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


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 相关文章推荐
最常用的12种设计模式小结
Aug 09 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
Vue实现多页签组件
Jan 14 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
微信小程序实现搜索功能
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
E路文章系统PHP
2006/12/11 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
php的扩展写法总结
2019/05/14 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
python操作redis的方法
2015/07/07 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
python数据爬下来保存的位置
2020/02/17 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
database面试题
2013/03/28 面试题
电焊工岗位职责
2014/03/06 职场文书
小学生环保演讲稿
2014/04/25 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
介绍信样本
2015/01/31 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript