Maison >Applet WeChat >Développement de mini-programmes >Méthode d'implémentation de la fonction de recherche dans le mini programme (code)
Méthode d'implémentation de la fonction de recherche dans le mini programme (code)
- 不言original
- 2018-09-07 14:52:1512323parcourir
La fonction de recherche dans le mini-programme est très importante. Après tout, la fonction de recherche apportera une grande commodité à l'utilisateur. Voyons comment implémenter la fonction de recherche dans le mini-programme.
1. Page
<!--pages/review/search/search.wxml-->
<view class="page">
<view class="weui-search-bar">
<form bindsubmit="searchA" class="weui-search-bar__form" style="background-color:#eee;position:relative;">
<view>
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" name="keyword" confirm-type="search" bindconfirm="searchB"
placeholder="搜索姓名、节目名、年份、老师名" value="{{inputVal}}" focus="{{inputShowed}}" bindfocus="" />
<button class="search-btn" formType="submit">搜索</button>
</view>
</view>
</form>
</view>
<block wx:if='{{isSearching}}'>
<view>
<view class="search-title">热门搜索</view>
<view class="zj">
<block wx:for='{{hotTag}}' wx:key='id'>
<view class='tags' data-keyword='{{item}}' bindtap='searchHot'>{{item}}</view>
</block>
</view>
</view>
</block>
<block wx:else>
<block wx:if='{{searchData.length==0}}'>
<view class='search-hint'>
没有符合条件的选项
</view>
</block>
<block wx:else>
<view class='search-list'>
<block wx:for='{{searchData}}' wx:key='id'>
<navigator url="{{item.itemtype==2?'../videodetil/index?itemid='+item.id:'../material/index?itemid='+item.id}}" class="" style=''>
<view class='search-item'>
{{item.title}}
</view>
</navigator>
</block>
</view>
</block>
</block>
</view>
2.css
@import '../common/lib/weui.wxss';
.weui-search-bar{
border-top:0px;
background-color:white;
border-bottom:0px;
}
.weui-search-bar__label{
background:#F0F0F0;
}
.weui-search-bar__form {
border-radius:8px;
width:686rpx;
height: 2.9%;
margin-bottom: 1.3%;
}
.weui-icon-search{
margin-left:7px;
}
.weui-search-bar__box{
width: 91.5%;
height: 2.9%;
}
.page__hd{
width: 708rpx;
height: 228rpx;
margin-left: 2.3%;
}
.swiper-ad {
height: 228rpx;
width: 100%;
}
.swiper-image {
height: 100%;
width: 100%;
}
.title-hd{
font-family: PingFangSC-Semibold;
font-size: 22px;
color: #333333;
letter-spacing: 0;
text-align: center;
line-height: 22px;
width: 25.5%;
height: 44rpx;
margin-top: 32rpx;
margin-left: 2.3%;
margin-bottom: 32rpx;
}
.info-top{
background-color: white;
position: relative;
height:150rpx;
border-bottom:1px solid #F0F0F0;
width: 94.5%;
margin-left: 2.3%;
}
.info-vip{
position: absolute;
left:40rpx;
}
.info-bm{
position: absolute;
left:224rpx;
}
.info-sc{
position: absolute;
left:408rpx;
}
.info-zb{
position: absolute;
left:592rpx;
}
.info-img{
margin-top: 30rpx;
width: 76rpx;
height:76rpx;
}
.info-right{
float:right;
}
.info-font{
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
letter-spacing: 0;
line-height: 14px;
text-align: center;
}
.hd{
width: 94.5%;
height: 598rpx;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
border-radius: 8px;
margin-left: 2.3%;
margin-top: 32rpx;
}
.hd-zt{
height:600rpx;
margin-bottom: 40rpx;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
border-radius: 8px;
}
.hd-pic{
width: 100%;
height:386rpx;
}
.hd-title{
font-family: PingFangSC-Regular;
font-size: 16px;
color: #333333;
letter-spacing: 0;
line-height: 16px;
margin-top:24rpx;
margin-left: 24rpx;
}
.hd-price{
font-family: PingFangSC-Regular;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 14px;
margin-top:48rpx;
margin-left: 24rpx;
}
.searchbar-result{
margin-top: 0;
font-size: 14px;
}
.searchbar-result:before{
display: none;
}
.weui-cell{
padding: 12px 15px 12px 35px;
}
.placeholder{
width:50%;
margin: 5px;
padding: 0 10px;
text-align: center;
background-color: #EBEBEB;
height: 2.3em;
line-height: 2.3em;
color: #cfcfcf;
}
.weui-grid_border{
width:708.75rpx;
height:560rpx;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
border-radius: 8px;
}
.weui-grid__product{
display:block;
width:708.75rpx;
height:386rpx;
margin:0 auto;
padding-top:10px;
margin-bottom: 10px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
border-bottom:0;
border-radius: 8px;
}
.weui-grid_font{
background-color: white;
height:78px;
border-top:0;
padding-top: 4rpx;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
border-radius: 8px;
}
.product-price{
font-size:14px;
color:#996B7A;
padding-top:5px;
text-align:center;
}
.weui-underline{
text-align:center;
color:#F0C4D3;
margin-top: -5px;
}
.category-item{
border:0px;
background-color:white;
width:25%;
}
.category-item{
border:0px;
background-color:white;
width:25%;
}
.category-pic{
display:block;width:50px;height:50px;margin:0 auto
}
.category-name
{
margin-top:6px;display:block;text-align:center;color:#82501e;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}
.active-nav-border{
margin:20rpx auto 40rpx auto;
width: 60rpx;
height: 4rpx;
background: rgb(240,196,211);
}
.page-version{
margin-top:20rpx;
padding: 30rpx 50rpx 30rpx;
text-align: center;
color:#ccc;
background-color: white;
font-size:12px;
}
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item{
height: 200px;
}
.scroll-view-item_H{
display: inline-block;
width: 320rpx;
height: 180rpx;
margin-left: 20rpx;
}
.sp{
width: 300rpx;
height: 68rpx;
font-size: 34px;
color: #303030;
letter-spacing: 0;
line-height: 68rpx;
margin-bottom: 40rpx;
margin-left:32rpx;
}
.zj{
font-family: PingFangSC-Regular;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 16px;
margin:20px 0 40rpx 20px;
position: relative;
}
.tags {
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 16px;
display: inline-block;
height: 18px;
padding:8px;
margin:10px;
border-radius:5px;
background:#f3f3f6;
}
.search-title {
margin-left: 40rpx;
color:#999999;
}
.search-list, {
padding:0 20px;
}
.search-hint {
padding: 0 20px;
color:#999;
font-size:14px;
}
.search-item {
width:100%;
margin:5px 0;
background:#eee;
padding:5px;
border-radius:5px;
height: 18px;
line-height: 18px;
font-size:14px;
}
.search-btn {
position: absolute;
z-index: 11;
top: -20rpx;
right: -42rpx;
height: 54rpx;
width: 120rpx;
text-align: center;
line-height: 76rpx;
font-size: 28rpx;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
background-color: #eee;
}
.search-btn::after{
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border:0;
}
3.js
const requestApi = require('../../utils/request.js')
const app = getApp()
Page({
data: {
isSearching: true,
pageindex: 0,
pagesize: 20,
hotTag: ['群舞', '原创', '舞蹈', '唱歌'],
historyTag: ['小舞蹈家', '最美童声'],
searchData: []
},
onLoad(options) {
},
onShow() {
this.setData({
isSearching:true
})
},
//点击搜索触发事件
searchA(e) {
let keywords = e.detail.value.keyword
console.log("eeeee",e)
if(!keywords.length) {
wx.showToast({
title: '不能为空',
icon: 'loading',
duration: 2000
})
return;
}
this.search(keywords)
},
//点击热门搜索触发事件
searchHot(e) {
let keywords = e.target.dataset.keyword;
this.setData({
inputVal: keywords,
})
this.search(keywords)
},
//接口配置
search(keywords) {
let params = {
appid: app.appId,
openid: app.openId,
pageindex: this.data.pageindex,
pagesize: this.data.pagesize,
secret: app.secret,
keywords
}
let urlPath = '/api/item/search'
requestApi.doPost(urlPath, params, res => {
console.log('搜索接口', res);
this.setData({
searchData:res.data,
isSearching:false,
});
})
},
})
Recommandations associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Code d'implémentation pour les fonctions similaires et de collection dans le mini programmeArticle suivant：Code d'implémentation pour les fonctions similaires et de collection dans le mini programme
Articles Liés
Voir plus- WeChat Mini Program Exercices simples de mise en page, de logique et de style
- Explication détaillée et exemples de l'applet WeChat wx.request (méthode d'appel d'interface)
- Programme WeChat Mini - Explication détaillée de la connexion WeChat, du paiement WeChat et des modèles de messages
- Applet WeChat (compte d'application) exemple d'application simple et explication détaillée de l'exemple
- Explication détaillée de l'applet WeChat pour la boucle