读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

小程序自定义搜索组件

2020年10月15日 107点热度 0人点赞 0条评论

效果图:小程序自定义搜索组件插图

 

定义一个公共的搜索组件,该组件不做任何的网络请求操作,只做一个“输入”的操作,然后将输入的结果传给页面或者是上层组件。

wxml

 

<view class="dx-search-bar">
  <view class="dx-search-bar-from">
    <!-- 搜索框的输入区 -->
    <view class="dx-search-bar-box">
      <icon class="dx-icon-search" type="search" size="12" />
      <input type="text" class="dx-search-bar-input" placeholder="{{placeholder}}"  bindblur="blur"   />
    </view>
    <!-- 搜索框 的标签 -->
    <label class="dx-search-bar-label">
      <text class="dx-search-bar-text">搜索</text>
    </label>
  </view>
</view>

css

 


.dx-search-bar-from {
  display: flex;
  justify-content: space-between;
}

.dx-search-bar-input {
  width: 460rpx;
  display: block;
  padding-left: 10px;
}

.dx-search-bar-box {
  display: flex;
  align-items: center;
  border: 1px solid green;
  border-radius: 5px;
  padding: 0 5px;
}

.dx-search-bar-label {
  font-size: 14px;
}

当输入结束后,input失去焦点时组件将参数传递给上层组件。这时自定义组件需要触发事件才能将参数传给上层组件,该事件是triggerEvent方法,指定了事件名、detail和事件选项。

blur函数

    blur(e) {
      console.log(e)
      this.setData({
        searchValue: e.detail.value
      })
      // 组件向页面传递参数
      this.triggerEvent('realNameConfirm', e.detail.value)
    },

父组件或者是页面向组件传递参数,通过自定义组件的属性向组件传递参数,在搜索组件内设置组件属性的类型后,该属性值就是父组件向搜索组件传递的参数。搜索组件的js代码:

 

// pages/ui_component/searchbar/searchbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    placeholder: {
      type: String,
      value: ""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    placeholder: "",
    searchValue: ""
  },

  /**
   * 组件的方法列表
   */
  methods: {

    blur(e) {
      console.log(e)
      this.setData({
        searchValue: e.detail.value
      })
      // 组件向页面传递参数
      this.triggerEvent('realNameConfirm', e.detail.value)
    },

  }
})
赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年10月15日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
node canvas 悦读 mysql redux 随笔 git flutter 闲谈 CSS JavaScript taro hook react 阅读 vue Echarts 小程序 Nginx
推荐文章
  1. 微信小程序中自定义导航和地图定位
  2. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
  3. 小程序全局和局部自定义导航栏样式
  4. 小程序使用腾讯的位置服务
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号