cari

Rumah  >  Artikel  >  applet WeChat  >  小程序中搜索功能的实现方法（代码）

小程序中搜索功能的实现方法（代码）

不言
不言asal
2018-09-07 14:52:1512287semak imbas

小程序中搜索功能是非常重要的，毕竟有了搜索功能会给该用户很大的方便，下面我们就来看看小程序中如何实现搜索功能。

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=&#39;{{isSearching}}&#39;>
     <view>
      <view class="search-title">热门搜索</view>
      <view class="zj">
        <block wx:for=&#39;{{hotTag}}&#39; wx:key=&#39;id&#39;>
          <view class=&#39;tags&#39; data-keyword=&#39;{{item}}&#39; bindtap=&#39;searchHot&#39;>{{item}}</view>
        </block>
      </view>
    </view>
  </block>
  <block wx:else>
    <block wx:if=&#39;{{searchData.length==0}}&#39;>
      <view class=&#39;search-hint&#39;>
        没有符合条件的选项
      </view>
    </block>
    <block wx:else>
      <view class=&#39;search-list&#39;>
      <block wx:for=&#39;{{searchData}}&#39; wx:key=&#39;id&#39;>
    <navigator url="{{item.itemtype==2?&#39;../videodetil/index?itemid=&#39;+item.id:&#39;../material/index?itemid=&#39;+item.id}}" class="" style=&#39;&#39;>
        <view class=&#39;search-item&#39;>
          {{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,
      });

    })
  },

})

相关推荐：

微信小程序开发中怎样实现搜索内容高亮功能

小程序开发实现搜索全部城市列表界面

Atas ialah kandungan terperinci 小程序中搜索功能的实现方法（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：小程序中点赞和收藏功能的实现代码Artikel seterusnya：小程序如何实现模板消息发送的功能（图文）

Artikel berkaitan

Lihat lagi