微信小程序实现显示和隐藏控件-头像-取值-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}}" />
相关文章
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
- 【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
- 元素滚动 scroll 与 scroll 事件
- Vue - PC 端列表下拉页面触底加载分页数据,监听浏览器屏幕触底事件,类似uni-app微信小程序的onReachBottom()页面触底生命周期函数(监听屏幕触底事件,实现懒加载效果)
- React事件绑定的几种方式对比
- macOS SwiftUI 高级用法之Text捕获截取事件实现隐藏收起展开(教程含源码)
- JS高阶---事件循环模式(事件轮询)
- GUI事件监听
- 说说"铁马冰河"事件
- 微信小程序:冒泡事件及其阻止
- 不刷新网页修改url链接(history.pushState和history.replaceState新增、替换历史记录用法介绍)、popstate玩转浏览器历史记录介绍、如何触发popstate事件、popstate事件的应用场景、history.state查看当前页面数据介绍
- 微信小程序阻止事件冒泡【看这里】
- 项目经理问:我怎么有做不完的事情–事件篮方法
- Android 事件分发机制具体解释
- 微信小程序 点击事件 传递参数
- SSE:服务器发送事件,使用长链接进行通讯
- HTML5服务器端推送事件 解决PHP微信墙推送问题