Search

搜索栏

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

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

效果

search01