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

网络编程 2024/12/24 佚名

3 1 2

上效果图:

一:搜索框功能实现

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="/UploadFiles/2021-04-02/card.wxml">



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实现代码


<"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));
"color: #ff0000">总结

微信小程序搜索,小程序搜索框样式

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日