위 챗 애플 릿 검색 상자 스타일 및 검색 페이지 로 이동(애플 릿 검색 기능)
1:검색 상자 기능 구현
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));
?>
총결산위 챗 애플 릿 검색 상자 스타일 과 검색 페이지(애플 릿 검색 기능)로 넘 어 가 는 글 을 소개 합 니 다.더 많은 위 챗 애플 릿 검색 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 지원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.