微信小程序实现显示和隐藏控件

.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}}" />

微信小程序实现显示和隐藏控件-头像-取值-bindblur事件的更多相关文章

  1. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

  2. 微信小程序基础之交互操作控件

    好久没有写关于微信小程序的文章了,今天简单的发表一篇,内容比较简单,包括:ActionSheet上拉菜单.AlertAction提示框.SuccessAction完成框.LoadingAction加载 ...

  3. 微信小程序中显示与隐藏(hidden)

    1.wx.wxml页面部分 <view bindtap='click'>点击</view> //这是显示隐藏的部分 <view hidden="{{hidden ...

  4. 微信小程序中显示html富文本的方法

    微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...

  5. JQuery动态添加控件并取值

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 微信小程序tabBar显示问题

    在微信小程序的开发中,我遇到疑惑如下: 在app.json中定义了多个pages,一般微信小程序启动的时候,自动加载pages下的第一个页面, "pages": [        ...

  7. 微信小程序对接显示阿里云数据库数据

    现实需求 在项目中需求,有时候现场设备发生故障,需要远程的人员知道.除了邮件方式,以微信小程序的方式也很好.今天进行尝试,并制作了一个demo版本. 1.微信小程序申请制作前端 1.1lists文件( ...

  8. 微信小程序 键盘显示短信验证码

    1.场景描述: IOS系统 一些APP或者微信小程序在收到短信验证码的时候会在键盘上自动保存验证码信息,当用户点击的时候,会自动赋值到当前所点击的输入框中 2.案例: 2.实现: TIPS:这个功能是 ...

  9. 微信小程序——picker通过value返回你想获取的值

    关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的 ...

随机推荐

  1. java反射调用dubbo接口

    需求:项目增加幂等 场景:1.三个项目:a .b.c2.a项目加幂等3.b项目dubbo调用项目a的时候超时没有获取返回结果,增加重试机制(非立即重试,3min or 5min 后重试)4.c项目是一 ...

  2. BZOJ1270或洛谷1107 [BJWC2008]雷涛的小猫

    BZOJ原题链接 洛谷原题链接 \(DP\)水题. 定义\(f[i][j]\)表示小猫在高度\(i\),位于第\(j\)棵树时最多能吃到的柿子的数量.分为直接往下跳和跳到另一棵树两个决策. 那么很容易 ...

  3. Maximum Sum Circular Subarray LT918

    Given a circular array C of integers represented by A, find the maximum possible sum of a non-empty ...

  4. SpringBoot放置在static下面的静态页面无法访问

    最近写项目本来写的好好的,突然static的静态页面访问不了了. 于是我各种上网查资料,看大佬的解决方案,还是没有解决. 直到发现了这篇文章 https://blog.csdn.net/cmqwan/ ...

  5. super()调用父类构造方法

    super()表示调用父类中的构造方法 1.子类继承父类,子类的构造方法的第一行,系统会默认编写super(),在调用子类的构造方法时,先调用父类的无参数构造方法 2.如果父类中只有有参数构造方法,那 ...

  6. 文件扩展关联命令(assoc)

    assoc 命令: // 描述: (association) --> 联想.关联 显示或修改文件扩展名关联. 如果在没有参数的情况下使用,assoc将显示所有当前文件扩展名关联的列表. // 语 ...

  7. 20175316 盛茂淞 2018-2019-2 《Java程序设计》实验二 面向对象程序设计 实验报告

    20175316 盛茂淞 2018-2019-2 <Java程序设计>实验二 面向对象程序设计 实验报告 (一)单元测试 在 IDEA中我们把产品代码放在src目录中,把测试代码放在tes ...

  8. 【翻译】Flume 1.8.0 User Guide(用户指南) Processors

    翻译自官网flume1.8用户指南,原文地址:Flume 1.8.0 User Guide 篇幅限制,分为以下5篇: [翻译]Flume 1.8.0 User Guide(用户指南) [翻译]Flum ...

  9. istio实现自动sidecar自动注入(k8s1.13.3+istio1.1.1)

    一.自动注入的前提条件 自动注入功能需要kubernetes 1.9或更高版本: kubernetes环境需支持MutatingAdmissionWebhook: 二.在namespace中设置自动注 ...

  10. springboot整合redis-sentinel支持Cache注解

    一.前提 已经存在一个redis-sentinel集群,两个哨兵分别如下: /home/redis-sentinel-cluster/sentinel-1.conf port 26379 dir &q ...