Search

搜索栏

search这部分是利用小程序input组件实现，在下面的示例中主要使用了focus和bindinput两个属性，由于mpvue从底层支持 Vue.js 语法和构建工具体系，因此可以用vue的v-model进行双向数据绑定，示例如下：

  1. <template>
  2.   <div class="page">
  3.     <div class="page__hd">
  4.       <div class="page__title">SearchBar</div>
  5.       <div class="page__desc">搜索栏</div>
  6.     </div>
  7.     <div class="page__bd">
  8.       <div class="weui-search-bar">
  9.         <div class="weui-search-bar__form">
  10.           <div class="weui-search-bar__box">
  11.             <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
  12.             <input type="text" class="weui-search-bar__input" placeholder="搜索" v-model="inputVal" :focus="inputShowed" @input="inputTyping" />
  13.             <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
  14.               <icon type="clear" size="14"></icon>
  15.             </div>
  16.           </div>
  17.           <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
  18.             <icon class="weui-icon-search" type="search" size="14"></icon>
  19.             <div class="weui-search-bar__text">搜索</div>
  20.           </label>
  21.         </div>
  22.         <div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="hideInput">取消</div>
  23.       </div>
  24.       <div class="weui-cells searchbar-result" v-if="inputVal.length > 0">
  25.         <navigator url="" class="weui-cell" hover-class="weui-cell_active">
  26.           <div class="weui-cell__bd">
  27.             <div>实时搜索文本</div>
  28.           </div>
  29.         </navigator>
  30.         <navigator url="" class="weui-cell" hover-class="weui-cell_active">
  31.           <div class="weui-cell__bd">
  32.             <div>实时搜索文本</div>
  33.           </div>
  34.         </navigator>
  35.         <navigator url="" class="weui-cell" hover-class="weui-cell_active">
  36.           <div class="weui-cell__bd">
  37.             <div>实时搜索文本</div>
  38.           </div>
  39.         </navigator>
  40.         <navigator url="" class="weui-cell" hover-class="weui-cell_active">
  41.           <div class="weui-cell__bd">
  42.             <div>实时搜索文本</div>
  43.           </div>
  44.         </navigator>
  45.       </div>
  46.     </div>
  47.   </div>
  48. </template>
  50. <script>
  51. export default {
  52.   data() {
  53.     return {
  54.       inputShowed: false,
  55.       inputVal: ""
  56.     }
  57.   },
  58.   methods: {
  59.     showInput() {
  60.       this.inputShowed = true;
  61.     },
  62.     hideInput() {
  63.       this.inputVal = '';
  64.       this.inputShowed = false
  65.     },
  66.     clearInput() {
  67.       this.inputVal = '';
  68.     },
  69.     inputTyping(e) {
  70.       console.log(e);
  71.       this.inputVal = e.mp.detail.value
  72.     }
  73.   }
  74. }
  75. </script>
  77. <style scoped>
  78. .searchbar-result {
  79.   margin-top: 0;
  80.   font-size: 14px;
  81. }
  82. .searchbar-result:before {
  83.   display: none;
  84. }
  85. .weui-cell {
  86.   padding: 12px 15px 12px 35px;
  87. }
  88. </style>

效果

search01