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

向右看齐 2021-09-17 01:36 328阅读 0赞

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，328人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序（触控事件）

事件简介 1. 本质：事件是视图层到逻辑层的通讯方式 2. 作用：事件可以将用户的行为反馈到逻辑层进行处理 3. 应用：事件可以绑定在组件上，当达到触发事件，就会执

淡淡的烟草味﹌/ 2023年06月17日 14:55/ 0 赞/ 46 阅读

相关 23.微信小程序（触控事件）

微信小程序（触控事件）事件简介事件简介 ①本质：事件是视图层到逻辑层的通讯方式 ②作用：事件可以将用户的行为反馈到逻辑层进行处理 ③应用：事件可以绑

朱雀/ 2023年06月17日 12:55/ 0 赞/ 54 阅读

相关微信小程序：隐藏和显示功能

![Image 1][]和![Image 1][]界面 app.js Page({ data:{ showView:true

浅浅的花香味﹌/ 2022年06月10日 08:23/ 0 赞/ 285 阅读

相关微信小程序之触控事件

什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事

ゝ一世哀愁。/ 2022年05月24日 06:45/ 0 赞/ 272 阅读

相关微信小程序获得微信头像和昵称

[微信小程序获得微信头像和昵称][Link 1] { wx.getSetting({ success: res => {

清疚/ 2022年04月02日 04:18/ 0 赞/ 814 阅读

相关微信小程序--open-data获取用户头像实现头像圆角

index.wxml: <view class="userinfo-avatar"> <open-data type="userAvatarUrl"><

桃扇骨/ 2022年03月16日 17:07/ 0 赞/ 446 阅读

相关微信小程序 block 隐藏与显示

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。所以 hidden、display等通用隐藏元素的方法对block是无效的

骑猪看日落/ 2021年09月25日 09:22/ 0 赞/ 525 阅读

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

微信小程序实现显示和隐藏控件 `.wxml:` <view class=" { {showOrHidden?'show':'hidden'}}">

向右看齐/ 2021年09月17日 01:36/ 0 赞/ 329 阅读

相关微信小程序授权登录(获取微信头像并显示)

用户页面代码 user.wxml <block> <view class="user_img_wrap" wx:if="{ {userInfo.a

小咪咪/ 2021年07月24日 19:19/ 0 赞/ 1313 阅读

相关微信小程序触控事件

微信小程序触控事件：转：[http://www.jb51.net/article/94936.htm][http_www.jb51.net_article_94936

超、凢脫俗/ 2021年07月16日 15:08/ 0 赞/ 559 阅读