您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關微信小程序如何實現(xiàn)搜索框樣式并實現(xiàn)跳轉到搜索頁面,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
上效果圖:
<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', }) },
<!--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: '網(wǎng)絡異常!', 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實現(xiàn)代碼
<?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); //選擇數(shù)據(jù)庫 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); //獲取數(shù)據(jù)集 if(!$rs){die("數(shù)據(jù)庫沒有數(shù)據(jù)!");} //循環(huán)讀取數(shù)據(jù)并存入數(shù)組對象 $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)); ?>
關于“微信小程序如何實現(xiàn)搜索框樣式并實現(xiàn)跳轉到搜索頁面”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。