标签：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。