热门分类: app推广
欢迎加入: QQ群(爱盈利CLUB) ASO推广/App运营/发文/友链,
关注本站微信
联系我们: 点击这里给我发消息

联系电话:010-58484096

小程序丨手把手教你微信小程序实战开发(六):渲染标签的使用

小程序运营 栗子酱 1529浏览 来源:

微信小程序实战系列教材:
1.微信小程序实战开发(一):微信小程序简介
2.微信小程序实战开发(二):小程序基本目录结构讲解
3.微信小程序实战开发(三):小程序视图容器(view container)
4.微信小程序实战开发(四):组件的基本使用讲解

5.微信小程序实战开发(六):渲染标签的使用

在微信小程序里面目前只有两种渲染标签:条件渲染和列表渲染。
一.条件渲染
在框架中,我们用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块,因为 wx:if 是一个控制属性,需要将它添加到一个标签上,也就是view标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。下面我们就紧接着上节的课程案例来介绍。
.js

  1. Page({
  2.   data:{
  3.     text:”这是www.html51.com的内容”,
  4.     btnText:”这是按钮的内容”,
  5.   },

.wxml

  1. 51小程序demo
  2. <button type=”default”  hover-class=”other-button-hover”> default </button>
  3. <button type=”primary” bindtap=”btnClick”> {{btnText}} </button>
  4. <view wx:if=”{{true}}”>{{text}}</view>

复制代码

1).可以当if条件为true时,显示“这是www.html51.com的内容”,如下图所示:
手把手教你微信小程序实战开发(六):渲染标签的使用

2).当if条件为false时,就不会显示“这是www.html51.com的内容,如下图所示:

  1. <view wx:if=”{{false}}”>{{text}}</view>

手把手教你微信小程序实战开发(六):渲染标签的使用
3).当然,上述实例中的true和false也可以是数据绑定格式实现,所有当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。代码和实现效果图如下:

  1.   data:{
  2.     text:”这是www.html51.com的内容”,
  3.     btnText:”这是按钮的内容”,
  4.     show :true,
  5.   },
  1. <view wx:if=”{{show}}”>{{text}}</view>

手把手教你微信小程序实战开发(六):渲染标签的使用
4).我们还可以做动态的条件渲染判断,点击鼠标时做条件渲染:

  1.   data:{
  2.     text:”这是www.html51.com的内容”,
  3.     btnText:”这是按钮的内容”,
  4.     show :true,
  5.   },
  1.   btnClick: function() {
  2.       console.log(“按钮被点击了了…”)
  3.       var isShow = this.data.show;
  4.       console.log(“isShow:” + isShow)
  5.       this.setData({text:”这是新的51小程序内容”})
  6.   }

编译可以看到:
手把手教你微信小程序实战开发(六):渲染标签的使用
设置show:false后编译:
手把手教你微信小程序实战开发(六):渲染标签的使用

5).我们还有做一个点击后“隐藏”–“显示”的循环动作。

  1.   btnClick: function() {
  2.       console.log(“按钮被点击了了…”)
  3.       var isShow = this.data.show;
  4.       console.log(“isShow:” + isShow)
  5.       this.setData({text:”这是新的51小程序内容”,show:!isShow})
  6.   }

其编译后的显示结果如下:
手把手教你微信小程序实战开发(六):渲染标签的使用

6)也可以用 wx:elifwx:else 来添加一个 else 块,如下所示:

  1. 51小程序demo
  2. <button type=”default”  hover-class=”other-button-hover”> default </button>
  3. <button type=”primary” bindtap=”btnClick”> {{btnText}} </button>
  4. <view wx:if=”{{show}}”>{{text}} 1</view>
  5. <view wx:else>{{text}} 2</view>

根据以上代码,当我们点击鼠标时,会循环显示1 2我们看一下结果:
手把手教你微信小程序实战开发(六):渲染标签的使用
手把手教你微信小程序实战开发(六):渲染标签的使用
二.列表渲染
列表渲染其实就是我们常说的for循环渲染啦,用过列表数据我们可以循环显示一堆新闻数据等,在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

  1. <view wx:for=”{{array}}”>
  2.   {{index}}: {{item.message}}
  3. </view>
1).我们来继续举例查看,在之前我们的.wxml文件中新增如下代码:
  1. <view wx:for=”{{[‘aaa’,’bbb’,’ccc’]}}”>
  2. www.html51.com小程序教程循环播放…
  3. </view>
编译后的结果如下图所示:
手把手教你微信小程序实战开发(六):渲染标签的使用

2).同样,列表渲染也可以用数据绑定。上述同样的效果,用数据绑定实现的代码如下:

  1.   data:{
  2.     text : “这是www.html51.com的内容”,
  3.     btnText : “这是按钮的内容”,
  4.     show : false,
  5.     news : [‘aaa’,’bbb’,’ccc’],
  6.   },
  1. <blockquote>51小程序demo

3)问题来了,我们如何才能显示数组里面的内容呢?默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。所以item可以显示数组里面的 内容了,我们来看一下:

  1. <view wx:for=”{{news}}”>
  2. {{item}}
  3. </view>

编译后的显示结果如下所示:
手把手教你微信小程序实战开发(六):渲染标签的使用

  1. <view wx:for=”{{news}}”>
  2. {{index}} : {{item}}
  3. </view>

手把手教你微信小程序实战开发(六):渲染标签的使用
4).如何动态的更新数组列表里面的值呢?举例:我们设置每次点击都会删除数组的第一个值用shift();

  1.   btnClick: function() {
  2.       console.log(“按钮被点击了了…”)
  3.       var isShow = this.data.show;
  4.       var newsData = this.data.news;
  5.       newsData.shift();
  6.       console.log(“isShow:” + isShow)
  7.       this.setData({text:”这是新的51小程序内容”,show:!isShow,news:newsData})
  8.   }

我们看一下演示效果:
手把手教你微信小程序实战开发(六):渲染标签的使用
本节注意:
1.在data中对show进行赋值时,不需要加双引号。

爱盈利(aiyingli.com)移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者,移动盈利指导。我们的目标是让盈利目标清晰可见!降低门槛,让缺乏经验、资金有限的个人和团队获得经验和机会,提高热情,激发产品。

转载请注明:爱盈利 » 小程序丨手把手教你微信小程序实战开发(六):渲染标签的使用

爱盈利
电话:010-58484096
寻求报道 |  广告合作
京ICP备15063977号-2
xml  网站地图
© 2012-2018 aiyingli.com. All Rights Reserved.
微信公众号
 

开发者服务

微信二维码
 

商务合作

微信二维码
 

运营小咖秀

微信二维码