微信小程序实现显示和隐藏控件-头像-取值-bindblur事件
2023-09-11 14:16:53 时间
微信小程序实现显示和隐藏控件
.wxml:
<view class=" {{showOrHidden?'show':'hidden'}}"></view>
.wxss:
.hidden {
display: none;
}
.show {
display: block;
}
.js:
data: {
showOrHidden:true,
//判断显示与否的,true表示显示,反之隐藏
},
简洁的方式,利用wx:if
的方式
.wxml:
<view wx:if='{{showOrHidden}}'></view>
.js:
data: {
showOrHidden:true,
//判断显示与否的,true表示显示,反之隐藏
},
点击按钮隐藏view
并显示另个view
<view class="{{showView?'show':'hidden'}}" >
<button class='show-button' bindtap='showButton'>go</button>
</view>
data: {
showView: true,
},
showButton:function(){
var that = this;
that.setData({
showView: (!that.data.showView)
})
}
头像
<open-data type="userAvatarUrl" class='img'></open-data>
.img {
width: 200rpx;
height: 200rpx;
margin: 20rpx;
border-radius: 50%;
display: flex;
overflow:hidden;
}
input
输入框和form
表单传值和取值方式
实现方式
data-index="{{index}}"
e.currentTarget.dataset.index
form表单取值
<form bindsubmit="formSubmit">与<button formType="submit">
formSubmit: function(e) {
var detail = e.detail.value.detail;
}
bindblur
事件
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="请输入内容" value="{{ceshi}}" />
相关文章
- 【微信小程序】-- 页面事件 - 上拉触底(二十六)
- uni-app - 全端兼容 Steps 步骤条组件(支持绑定点击事件、颠倒文字位置、自定义样式)解决 uview 组件库的 Steps 步骤条无法绑定点击事件且不兼容微信小程序,详细教程组件插件源码
- 解决Enter键与input 、a标签触发的事件的冲突
- Qt中基类widget的各个事件函数中包含了ignore()的调用
- MFC对话框中处理Enter或Esc按键事件方法
- 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件
- 【快应用】小程序转快应用如何阻止事件向上冒泡
- java 事件监听机制组成
- android源码-事件分发处理机制(上)- java层事件分发流程
- android悬浮框设置,支持点击事件。
- 【微信小程序】事件传参与数据同步
- Jquery为动态添加的未来元素绑定事件
- 微信公众号开发 回复事件(测试账号)
- javascript事件
- JavaScript是如何工作的:事件循环和异步编程的崛起 + 5种使用 async/await 更好地编码方式!
- VUE3 TypeScript 支持监听 键盘事件
- 按钮事件