ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

三、条件和列表渲染(微信小程序开发【有基础】-组件篇)

2022-05-15 14:33:15  阅读:49  来源: 互联网

标签:index name wxml 渲染 微信 代码 程序开发 组件 页面


1.if 和 else,以及 hidden 渲染

index.wxml(页面代码):

1 <view wx:if="{{flag}}">
2     if渲染
3 </view>
4 <view wx:else>
5     if-else渲染
6 </view>
7 <view hidden="{{flag}}">
8     hidden
9 </view>

index.js(页面js代码):

1 Page({
2       data: {
3         flag:true
4     }
5 })

两者区别在于:if渲染是通过生成和没有生成代码,来达到显示和隐藏的效果,但是hidden渲染是通过控制样式 display:none 来进达到隐藏和显示的效果

注意:wx:if 也是支持在表达式里面放三元运算和表达式:如wx:if = “{{ flag ? true : false }}”

2.block

index.wxml(页面代码):

1 <block wx:if="{{flag}}">
2     <view>组件</view>
3 </block>

 此时 block 并没有被渲染,这样子不会影响布局

3.for列表渲染

index.js(页面js代码):

 1 page({
 2     data: {
 3         arr:[1,2,3],
 4         arrobj:[
 5             {
 6                 id:1,
 7                 name:"林"
 8             },
 9             {
10                 id:2,
11                 name:"王"
12             }
13         ]
14     },
15 })

index.wxml(页面代码):

<view wx:for="{{arr}}">
 {{index}}---{{item}}
</view>

默认情况下索引是index,遍历对象是item

 当然也可以自定义

index.wxml(页面代码):

1 <view wx:for="{{arrobj}}" wx:for-index="idx" wx:for-item="data">
2  {{idx}}---{{data.name}}
3 </view>

 如果循环列表是动态的,我们应当为他绑定唯一标识key

index.wxml(页面代码):

1 <view wx:for="{{arrobj}}" wx:key="id">
2  {{index}}---{{item.name}}
3 </view>

 

标签:index,name,wxml,渲染,微信,代码,程序开发,组件,页面
来源: https://www.cnblogs.com/lyq888/p/16273086.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有