范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-从零开发微信小程序搜索组件教程

06-24 亚博APP
摘要:组件的组织器中要留意辨别 properties 和 data,properties 中写组件的对外属性,data 写组件的对内属性。

为组件设置一个容器,在容器中放置搜刮图标、输入框、断根文字按钮和搜刮按钮。

/

搜刮

组件样式

container:高度 100 rpx,布景色 #eee,flex 结构。

input-wrapper:高度 80 rpx,布景色 #fff,flex 结构,border-radius: 20rpx。

search-icon:宽高 32 rpx。

input:字体和光标色彩 #000,字体巨细 32 rpx。

close-icon-wrapper:宽高 80 rpx,绝对定位。

text:搜刮按钮宽 110 rpx,高 65 rpx,绝对定位,左侧框 2rpx solid #eee。

.container { background: #eee; height: 100rpx; width: 100%; display: flex; justify-content: center; align-items: center; } .input-wrapper { display: flex; align-items: center; height: 80rpx; width: 80%; background: #fff; border-radius: 20rpx; } .input-wrapper .search-icon { margin-left: 20rpx; width: 32rpx; height: 32rpx; } .input-wrapper input { margin-left: 10rpx; color: #000; font-size: 32rpx; caret-color: #000; width: 60%; } .input-wrapper .close-icon-wrapper{ position: absolute; left: 480rpx; width: 80rpx; height: 80rpx; background:#fff; display: flex; justify-content: center; align-items: center; } .input-wrapper .close-icon { width: 42rpx; height: 42rpx; } .input-wrapper text { position: absolute; right: 80rpx; width: 110rpx; height: 65rpx; padding: 0; background: #fff; display: flex; justify-content: center; align-items: center; font-size: 32rpx; border-left: 2rpx solid #eee; }

组件功能

/

组件的组织器中要留意辨别 properties 和 data,properties 中写组件的对外属性,data 写组件的对内属性。在本搜刮组件中 placeholder 和 value 从页面传来,所以它们写在 properties 中,节制断根按钮是不是呈现的 showCloseIcon 要写在 data 中。

properties: { placeholder: { type: String, value: \'搜刮\' // 假如页面不传placeholder,显示“搜刮” }, inputValue: { type: String } },

data: { showCloseIcon: false, },

2.方式设置

事务流程

(1)光标不聚焦,没有任何输入——显示搜刮图标、placeholder和搜刮按钮。

(2)光标聚焦,没有任何输入——光标闪灼,显示搜刮图标、placeholder和搜刮按钮。

(3)光标聚焦,有输入——光标闪灼,显示搜刮图标、输入文字、断根按钮和搜刮按钮。

(4)光标不聚焦,有输入——显示搜刮图标、输入文字、断根按钮和搜刮按钮。

(5)按回车搜刮——断根按钮埋没。

(6)点击搜刮按钮——断根按钮埋没。

因而可知,需要 input 组件的聚焦和键盘输入事务。

/

inputFocused:假如聚焦时,输入框中有内容,显亚博示 closeIcon;

handleInput:假如输入时没有内容,不显示 closeIcon,有内容,显示 closeIcon 并把值存入 value。

handleSearch:点击回车后,不显示 closeIcon。

triggerEvent:自界说组件触发事务时,需要利用 triggerEvent 方式,指定事务名、detail对象和事务选项。

inputFocused(e) { if (e.detail.value !== \'\') { this.setData({ showCloseIcon: true, }); } }, handleInput(e) { if (e.detail.value == \'\') { this.setData({ showCloseIcon: false, }); } else { this.setData({ showCloseIcon: true, }); this.triggerEvent(\'handleInput\', { value: e.detail.value }); } }, handleSearch() { // 点击键盘上的回车,挪用此方式 this.setData({ showCloseIcon: false, }); console.log(\'handleSearch\', this.data.inputValue); }, 搜刮别离为 closeIcon 和 搜刮按钮添加点击事务。

别离为 closeIcon 和 搜刮按钮添加点击事务。 clearValue() { this.triggerEvent(\'handleInput\', { value: \'\' }); this.setData({ showCloseIcon: false, }); }, onTap() { this.setData({ showCloseIcon: false, }); console.log(\'onTap\', this.data.inputValue); },组件 json { component:true }

页面 json

工程的名字是 cookbook,这里组件前缀同一为 ck。

{ usingComponents:{ ck-input:/components/search/index } }

页面 wxml

页面 js

handleInput(e) { this.setData({ inputValue: e.detail.value, }); },

至此,搜刮组件已完成初步开辟。

相干资讯:微信小法式微信小法式开辟教程

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数