input不同的事件类型及用法
【代码】input不同的事件类型及用法。
·
| bindinput | eventhandle | 是 | 键盘输入时触发 |
| bindfocus | eventhandle | 是 | 输入框聚焦时触发 |
| bindblur | eventhandle | 是 | 输入框失去焦点时触发 |
| bindconfirm | eventhandle | 是 | 点击完成按钮时触发 |
| bindconfirm | eventhandle | 是 | 敲回车时触发，跟点击input按钮完成触发用同一个函数 |
案例1：
<view class = "out">
<input class="inpt" type="text" placeholder="请输入" bindinput="onInput"/>
<button type="primary">提交按钮</button>
</view>.js:
//输入框输入的事件
onInput(e){
console.log(e);
},
案例2：bindinput输入的时候会触发
<view class = "out">
<input class="inpt" type="text" placeholder="请输入" bindinput="onInput"/>
<tex>输入的内容是：{{title}}</tex>
<!--必须这样写：disabled="{{true/false}}"放在差值表达式中，要不然不起作用-->
<button type="primary" disabled="{{!title.length}}">提交按钮</button>
</view>Page({
/**
* 页面的初始数据
*/
data: {
title:"",
state:true
},
//输入框输入的事件
onInput(e){
console.log(e);
let value = e.detail.value;
this.setData({
title:value
})
}, 
案例3：bindfocus获取焦点的时候会触发
<view class = "out">
<input class="inpt" type="text" placeholder="请输入" bindfocus="onFocus"/>
<tex>输入的内容是：{{title}}</tex>
<!--必须这样写：disabled="{{true/false}}"放在差值表达式中，要不然不起作用-->
<button type="primary" >提交按钮</button>
</view>
案例4： bindblur失去焦点的时候会触发
<view class = "out">
<input class="inpt" type="text" placeholder="请输入" bindblur="onBlur"/>
<tex>输入的内容是：{{title}}</tex>
<!--必须这样写：disabled="{{true/false}}"放在差值表达式中，要不然不起作用-->
<button type="primary" >onBlur按钮</button>
</view>
onBlur(e){
console.log(e);
},
textarea：可以输入多行
常用的属性参考input即可，和input唯一的不同就是可以输入多行文本
.wxml:
<view class = "out">
<input class="inpt" type="text" placeholder="请输入" bindblur="onBlur"/>
<textarea class = "textarea" placeholder="请输入详细的文本内容"></textarea>
<button type="primary" >textarea按钮</button>
</view>.wxss:
.out{
padding:30rpx;
border:1px solid #ccc;
margin:30rpx;
}
.out .inpt{
background:#eee;
margin-bottom: 20rpx;
padding: 20rpx;
}
.out .textarea{
background: #eee;
margin-bottom: 20rpx;
width:calc( 100% - 40rpx);/*因为padding在100%的基础上向外延申了 */
height: 220rpx;
padding: 20rpx;
}
checkbox:一次性选择多个
radio：一次性只能选一个，和checkbox类似用法
checkbox功能描述：
多选项目。
checkbox属性说明：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| value | string | 否 | checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value | |
| disabled | boolean | false | 否 | 是否禁用 |
| checked | boolean | false | 否 | 当前是否选中，可用来设置默认选中 |
| color | string | #09BB07 | 否 | checkbox的颜色，同css的color |
checkbox-group功能描述
多项选择器，内部由多个checkbox组成。
checkbox-group属性说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| bindchange | EventHandle | 否 | checkbox-group中选中项发生改变时触发 change 事件 |
.wxml:
<!--加上label后点击文字的时候也能选中-->
<checkbox-group bindchange="checkChange">
<view style="margin:20rpx">
<label>
<checkbox value="0"></checkbox>
<text>钓鱼</text>
</label>
</view>
<view style="margin:20rpx">
<label>
<checkbox value="1"></checkbox>
<text>打游戏</text>
</label>
</view>
<view style="margin:20rpx">
<label>
<checkbox checked color="red" value="2"></checkbox><!--checked 默认被选中-->
<text>看书</text>
</label>
</view>
</checkbox-group>
<view>.js:
checkChange(e){
console.log(e);
console.log(e.detail.value[0]);
},
showToast、showModal提示框：
.wxml:
<text>pages/showToast/showToast.wxml</text>
<button type="primary" bind:tap="clickBut" >showToast按钮</button>
<button type="primary" bind:tap="clickModal" style="margin-top:20rpx;">showModal提示框1</button>
<button type="primary" bind:tap="clickModal2" style="margin-top:20rpx;">showModal提示框2</button>.js:
clickBut(){
wx.showToast({
title: '执行成功执行成功执行成功 ',
icon:"success",//默认显示success图标，最多显示 7 个汉字
image:"/static/pic2.png" ,//自定义图标的本地路径，image 的优先级高于 icon
duration:2000,//点击后，延迟多久，
//并不是弹窗动画结束后才执行回调函数，而是点击弹框后就执行：res是执行成功后返回的值
success:res=>{
console.log(res)
}
})
},
clickModal(){
wx.showModal({
title:"是否删除",
content:"删除之后不可恢复，请谨慎删除",
//showCancel:false//是否显示取消按钮,默认为true
cancelText:"真的删？" ,//取消按钮的文字，最多 4 个字符
cancelColor:"#c00",//取消按钮的文字颜色
confirmText:"真的呀！",
success:res=>{
console.log(res) //当点击提示框中的确认或取消按钮后才会触发success方法
}
} )
},
clickModal2(){
wx.showModal({
title:"请输入验证码",
editable :true,//是否显示输入框
placeholderText:"请输入数字",//显示输入框时的提示文本
cancelText:"取消输入" ,//取消按钮的文字，最多 4 个字符
cancelColor:"#c00",//取消按钮的文字颜色
confirmText:"输入好啦"
} )
} ,
wx.showActionSheet:
wxml:
<button type="primary" bind:tap="clickSheet" style="margin-top:20rpx;" >showActionSheet按钮</button>.js:
data: {
itemList:["热干面","奶茶","鸡公煲","麻辣烫"]
},
clickSheet(){
wx.showActionSheet({
itemList: this.data.itemList,
success:res=>{// 这里要改成箭头函数 要不然this会出现指向问题 一个参数不需要加括号，加了也没事
console.log(res);
console.log("拿到的下标从0开始，现在的index为："+res.tapIndex);
console.log("点击的元素为："+this.data.itemList[res.tapIndex]);
},
fail: res=>{
console.log(res);
console.log(res.errMsg);
}
})
},
常见的导航栏API接口
静态的改变页面的标题：在.json文件中：
{
"usingComponents": {},
"navigationBarTitleText": "小小案例"
}
如何动态的改变页面标题，比如说当我阅读新闻时，我想显示新闻标题：
wx.setNavigationBarTitle(Object object)：
功能描述：
动态设置当前页面的标题
参数：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| title | string | 是 | 页面标题 |
wx.setNavigationBarColor(Object object)：
功能描述：
设置页面导航条颜色
参数
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| frontColor | string | 是 | 字体颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 | |
| backgroundColor | string | 是 | 背景颜色值，有效值为十六进制颜色 |
wx.hideHomeButton:隐藏返回首页按钮
wx.showNavigationBarLoading:在当前页面显示导航条加载动画
wx.hideNavigationBarLoading:在当前页面隐藏导航条加载动画
//进入页面之后修改，所以在onLoad中修改：
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
wx.setNavigationBarTitle({
title: 'onLoad函数中修改标题',
})
wx.setNavigationBarColor({
backgroundColor: "#0F40C3",
frontColor: " #ffffff",//仅支持 #ffffff 和 #000000
})
wx.showNavigationBarLoading()
setTimeout(()=>{
wx.hideNavigationBarLoading()
},2000)//设置定时器，2s后取消加载
wx.hideHomeButton();//隐藏返回首页按钮
},navigationStyle :
"backgroundColor":其实是设置下拉框的背景颜色！！！
所以要联合："enablePullDownRefresh":true使用，下拉刷新
backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light
设置真正的小程序背景颜色：
在wxss页面中加入：
page {
background: -webkit-linear-gradient(top, #ec7a64, #F99AAE, #cc3755);
background-repeat: no-repeat;
} 
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
17
0- 0
已为社区贡献6条内容
所有评论(0)