匿名通过本文主要向大家介绍了后端,ios,android,前端等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
小程序中搜索功能是非常重要的，毕竟有了搜索功能会给该用户很大的方便，下面我们就来看看小程序中如何实现搜索功能。
1.页面
<!--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;
}