欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
吴忠企业网站建设-【E企盈微信二次开发】如何从
时间: 2021-04-15 02:00 浏览次数:
引言:部件的结构器时要留意区别 properties 和 data,properties 中写部件的对外开放特性,data 写部件的对里特性。为部件设定一个器皿,在器皿中置放检索标志、键入框、消除文本按键和
--------

吴忠企业网站建设

------- 摘要:组件的结构器中要留意区别 properties 和 data,properties 中写组件的对外特性,data 写组件的对内特性。

为组件设定一个器皿,在器皿中置放检索标志、键入框、消除文本按钮和检索按钮。

input  span=
placeholder=\'{{placeholder}}\
value=\'{{inputValue}}\
bindinput=\ handleInput\
bindconfirm=\ handleSearch\
bindfocus=\ inputFocused\

检索

/input 

组件款式

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 组件的聚焦和电脑键盘键入恶性事件。

input  span=
placeholder=\'{{placeholder}}\
value=\'{{inputValue}}\
bindinput=\ handleInput\
bindconfirm=\ handleSearch\
bindfocus=\ inputFocused\
/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

ck-input span=
placeholder=\ 搜你想吃的\
inputValue={{inputValue}}
bind:handleInput=handleInput

/ck-input

网页页面 js

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

至此,检索组件已进行基本开发设计。

有关资讯: 手机微信小程序   手机微信小程序开发设计实例教程

---------

吴忠企业网站建设

------------


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园