zoukankan      html  css  js  c++  java
  • wx-show与!show

    切换的表示

    <!--index.wxml-->
    <view class="container">
      <view class="item">
        <view class="title" bindtap="toggle">
          <text>切换面板展示</text>
        </view>
        <!-- block 只是控制属性(wx:)的载体,页面渲染过程中没有实际意义 -->
        <!--<block wx:if="{{ show }}">
          <view class="content">
            <text>
              这里是内容。。。
              这里是内容。。。
              这里是内容。。。
            </text>
          </view>
          <view class="content">
            <text>
              这里是内容。。。
              这里是内容。。。
              这里是内容。。。
            </text>
          </view>
        </block>-->
    
    
        <!-- hidden 标签任然会工作,只是不显示在界面上 -->
        <view class="content" hidden="{{ !show }}">
          <text>
            这里是内容。。。
            这里是内容。。。
            这里是内容。。。
          </text>
        </view>
        <!-- wx:if当条件为假的时候是不渲染(这个标签不工作) -->
        <view class="content" wx:if="{{ show }}">
          <text>
            这里是内容。。。
            这里是内容。。。
            这里是内容。。。
          </text>
        </view>
      </view>
    </view>
    
    
    .item {
      border: 1px solid #ccc;
      border-radius: 3px;
       200px;
    }
    
    .item .title {
      border-bottom: 1px solid #ccc;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item .content {
      padding: 10px;
      font-size: 16px;
    }
    
    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        show: false
      },
      //事件处理函数
      toggle: function () {
        this.setData({ show: !this.data.show })
      }
    })
    
  • 相关阅读:
    php单点登录
    【Docker】docker镜像构建
    【测试经验】网关中间件测试
    【Jmeter】调用Dubbo方法
    【计算机网络】TCP三次握手与四次挥手
    【操作系统】死锁
    【操作系统】线程与进程
    【计算机网络】TCP/IP
    【计算机网络】Http与Https
    【二叉树】二叉树的创建与遍历
  • 原文地址:https://www.cnblogs.com/ygjzs/p/12045401.html
Copyright © 2011-2022 走看看