前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

作者头像
达达前端
发布2022-04-29 09:52:51
发布2022-04-29 09:52:51
94600
代码可运行
举报
文章被收录于专栏:达达前端达达前端
运行总次数:0
代码可运行

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

.wxml:

代码语言:javascript
代码运行次数:0
运行
复制
 <view class=" {{showOrHidden?'show':'hidden'}}"></view>

.wxss:

代码语言:javascript
代码运行次数:0
运行
复制
.hidden {
  display: none;
}
 
.show {
  display: block;
}

.js:

代码语言:javascript
代码运行次数:0
运行
复制
 data: {
    showOrHidden:true,
    //判断显示与否的,true表示显示,反之隐藏
 },

简洁的方式,利用wx:if的方式

.wxml:

代码语言:javascript
代码运行次数:0
运行
复制
<view wx:if='{{showOrHidden}}'></view>

.js:

代码语言:javascript
代码运行次数:0
运行
复制
 data: {
    showOrHidden:true,
    //判断显示与否的,true表示显示,反之隐藏
  },

点击按钮隐藏view并显示另个view

代码语言:javascript
代码运行次数:0
运行
复制
<view class="{{showView?'show':'hidden'}}" >
 <button class='show-button' bindtap='showButton'>go</button>
</view>
代码语言:javascript
代码运行次数:0
运行
复制
data: {
    showView: true,
},
showButton:function(){
    var that = this;
    that.setData({
      showView: (!that.data.showView)
    })
 }

头像

代码语言:javascript
代码运行次数:0
运行
复制
<open-data type="userAvatarUrl" class='img'></open-data>     
代码语言:javascript
代码运行次数:0
运行
复制
.img {
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx;
  border-radius: 50%;
  display: flex;
  overflow:hidden;
}

input输入框和form表单传值和取值方式

代码语言:javascript
代码运行次数:0
运行
复制
实现方式
data-index="{{index}}"
e.currentTarget.dataset.index
代码语言:javascript
代码运行次数:0
运行
复制
form表单取值
<form bindsubmit="formSubmit">与<button formType="submit">

formSubmit: function(e) {
  var detail = e.detail.value.detail;
}

bindblur事件

代码语言:javascript
代码运行次数:0
运行
复制
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="请输入内容" value="{{ceshi}}" />
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-11-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 微信小程序实现显示和隐藏控件
  • 头像
  • input输入框和form表单传值和取值方式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档