小程序封装search搜索组件

资源下载:https://download.****.net/download/qq_40190624/11157895

用户对搜索出来的list点击后,去到下一个页面,但是也会把当前数据在当前页面做成一个历史记录,如果点击历史对应的标签会,把带着当时存下来的Id跳到detail页面

小程序封装search搜索组件

search 子组件:

<view class='searchbar'>
  <navigator wx:if="{{isNavigator}}" url='/pages/search/search' class='search-navigator'></navigator>
  <view class='search-group' wx:else>
  <input placeholder='搜索' bindinput='onInputEvent'></input>
  </view>
</view>

search.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isNavigator: {//接收父组件传来的值
      type: Boolean,
      value: false
    }

  },
  data: {

  },
  /**
   * 组件的方法列表
   */
  methods: {
    onInputEvent(e) {
      let value = e.detail.value;//监听到Input框实时更新的值
      let options = {};
      let detail = { "value": value}
      this.triggerEvent('searchInput', detail, options )//注册触发事件在父组件使用,把在父组件需要用的值传过去
    }
  }
})

父组件:

注册子组件:

{
  "usingComponents": {
    "searchbar":"/components/searchbar/searchbar"
  }
}

父组件wxml引入

<searchbar bindsearchInput="onsearchInput"/><!--bind 为小程序提供的绑定事件searchInput 为在子组件注册的触发事件-->

父组件js:使用子组件的方法:

  onsearchInput(e) {
    let _this = this;
    let value = e.detail.value;
    network.getSerachItem({//调用搜索接口
      value,
      success(res) {
        _this.setData({//更新data数据
          items: res
        })
      }
    })
  },

小程序封装search搜索组件

相关推荐