Heim >WeChat-Applet >Mini-Programmentwicklung >Implementierungsmethode der Suchfunktion im Miniprogramm (Code)
Implementierungsmethode der Suchfunktion im Miniprogramm (Code)
- 不言Original
- 2018-09-07 14:52:1512324Durchsuche
Die Suchfunktion im Miniprogramm ist sehr wichtig. Schließlich bringt die Suchfunktion dem Benutzer großen Komfort. Schauen wir uns an, wie die Suchfunktion im Miniprogramm implementiert wird.
1. Seite
<!--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,
});
})
},
})
Verwandte Empfehlungen:
Miniprogrammentwicklung zur Implementierung der Suchschnittstelle für alle Städtelisten
Das obige ist der detaillierte Inhalt vonImplementierungsmethode der Suchfunktion im Miniprogramm (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierungscode für die Like- und Collection-Funktionen im MiniprogrammNächster Artikel：Implementierungscode für die Like- und Collection-Funktionen im Miniprogramm
In Verbindung stehende Artikel
Mehr sehen- WeChat Mini-Programm Einfache DEMO-Layout-, Logik- und Stilübungen
- Ausführliche Erklärung und Beispiele des WeChat-Applets wx.request (Schnittstellenaufrufmethode)
- WeChat Mini-Programm – Detaillierte Erläuterung der WeChat-Anmeldung, WeChat-Zahlung und Vorlagennachrichten
- Einfache Beispielanwendung für das WeChat-Applet (Anwendungskonto) und ausführliche Erläuterung des Beispiels
- Detaillierte Erklärung des WeChat-Applets für die Schleife