ミニプログラムの検索機能は非常に重要です。検索機能はユーザーに大きな利便性をもたらします。ミニプログラムに検索機能を実装する方法を見てみましょう。
<!--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>
@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; }
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, }); }) }, })
関連する推奨事項:
WeChat ミニ プログラム開発で検索コンテンツの強調表示機能を実装する方法
検索を実装するためのミニ プログラムの開発すべての都市リストインターフェイス
以上がミニプログラム(コード)での検索機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。