微信小程序教程系列之视图层的条件渲染(10)


Posted in Javascript onApril 19, 2017

本教程为大家分享了使用wx:if进行视图层的条件渲染,供大家参考,具体内容如下

微信小程序教程系列之视图层的条件渲染(10)

使用wx:if进行视图层的条件渲染

示例:

wxml:使用view

<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<view wx:if="{{boolean==true}}">
  <view class="bg_black"></view>

</view>
<view wx:elif="{{boolean==false}}">
  <view class="bg_red"></view>
</view>

wxss:

/**index.wxss**/
.bg_black {
 height: 200rpx;
 background: lightskyblue;
}
.bg_red {
 height: 200rpx;
 background: lightpink;

}

js:

// index.js

Page({
 data: {
  boolean:false
 },
 EventHandle: function(){
  var bol = this.data.boolean;
  this.setData({
   boolean: !bol

  })

 }

})

运行:

微信小程序教程系列之视图层的条件渲染(10)

续上:

把上面标注绿色部分的view改成block

wxml:使用block

<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<block wx:if="{{boolean==true}}">
  <view class="bg_black"></view>
</block>
<block wx:elif="{{boolean==false}}">
  <view class="bg_red"></view>

</block>

运行:

微信小程序教程系列之视图层的条件渲染(10)

续上:

增加一个wx:for做列表渲染

wxml:

<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<block wx:if="{{boolean==true}}" wx:for="{{arr}}">
  <view class="bg_black">内容:{{item}}</view>
</block>
<block wx:elif="{{boolean==false}}">
  <view class="bg_red">无内容</view>

</block>

index.js:

// index.js
Page({
 data: {
  boolean:false,
  arr: [1,2,3]
 },

 EventHandle: function(){

  var bol = this.data.boolean;

  this.setData({

   boolean: !bol

  })

 }

})

运行:

编辑错误。

微信小程序教程系列之视图层的条件渲染(10)

原因是wx:if不能与wx:for共用在一个组件上!

续上:

wx:if和wx:for必须分开使用

wxml:

<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<block wx:if="{{boolean==true}}">
  <block wx:for="{{arr}}">
    <view class="bg_black">内容:{{item}}</view>

  </block>
</block>
<block wx:elif="{{boolean==false}}">
  <view class="bg_red">无内容</view>

</block>

wxss:

/**index.wxss**/
.bg_black {
 height: 200rpx;
 background: lightskyblue;
}
.bg_red {
 height: 200rpx;

 background: lightpink;

}

index.js:

// index.js
Page({
 data: {
  boolean:false,
  arr: [1,2,3]
 },
 EventHandle: function(){
  var bol = this.data.boolean;

  this.setData({
   boolean: !bol

  })

 }

})

运行:

微信小程序教程系列之视图层的条件渲染(10)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
介绍一下28个JS常用数组方法
May 06 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 #Javascript
vue2.0父子组件间通信的实现方法
Apr 19 #Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 #Javascript
微信小程序页面传值实例分析
Apr 19 #Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 #Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 #Javascript
angular-cli修改端口号【angular2】
Apr 19 #Javascript
You might like
谈一谈收音机的高放电路
2021/03/02 无线电
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php header函数的常用http头设置
2015/06/25 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python中endswith()函数的基本使用
2015/04/07 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
python 监控logcat关键字功能
2020/09/04 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
体育教师自我鉴定
2014/02/12 职场文书
学党史心得体会
2014/09/05 职场文书
写给医院的感谢信
2015/01/22 职场文书
统计员岗位职责
2015/02/11 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
mysql事务隔离级别详情
2021/10/24 MySQL