本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(417)

2021-04(177)

2021-05(161)

2021-06(101)

2021-07(7)

微信小程序学习笔记二 列表渲染 + 条件渲染

发布于2021-09-15 22:18     阅读(32)     评论(0)     点赞(5)     收藏(4)


1. 列表渲染

1.1 wx:for

  • 在组件上使用wx:for控制属性绑定一个数组, 即可使用数组中各项的数据重复渲染该组件
  • 默认数组的当前项的下标变量名默认为 index, 数组当前项的变量名默认为item
    演示
    index.js中我们定义以下数据
 data: {
    arr: ["路明非", "楚子航", "凯撒", "芬格尔"],
  },

编写index.wxml文件代码如下

  <!-- 列表渲染测试 -->
<view class="goStudy" wx:for="{{arr}}">
   <text>{{item}} {{index}}</text>
</view>

运行效果:
在这里插入图片描述

index.jsdata属性中添加以下数据

 arr_obj: [{
      name: "路明非",
      blood: "S"
    },
    {
      name: "楚子航",
      blood: "A"
    },
    {
      name: "凯撒",
      blood: "A"
    },
    {
      name: "芬格尔",
      blood: "F"
    }]
  • 渲染
  <!-- 列表渲染测试 -->
    <view class="goStudy" wx:for="{{arr_obj}}">
      <text>姓名:{{item.name}},血统: {{item.blood}}级 </text>
  </view>

在这里插入图片描述


  • 使用 wx:for-item 可以指定数组当前元素的变量名,
  • 使用 wx:for-index 可以指定数组当前下标的变量名:
<view class="goStudy" wx:for="{{arr}}"  wx:for-index="arr_index" wx:for-item="arr_item">
    <text>{{arr_item}},{{arr_index}}</text>
</view>

1.2 block wx:for

可以将 wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

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

渲染效果:
在这里插入图片描述


1.3 wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供:

  1. 字符串, 代表在for循环的array中的item的某个property, 该property的值需要是列表中唯一的字符串或数字, 且不能动态改变
  2. 保留关键字*this 代表在for循环中item本身, 这种表示需要item本身是一个唯一的字符串或数字
  <view class="goStudy" wx:for="{{arr}}" wx:key="item">
      <text>{{item}}</text>
  </view>

1.4 注意事项

  1. wx:for 的值为字符串时,会将字符串解析成字符串数组
<view class="goStudy" wx:for="abc">
	<text>{{item}}</text>
</view>

等同于

<view class="goStudy" wx:for='{{ ["a","b","c"] }}'>
	<text>{{item}}</text>
</view>

在这里插入图片描述

  1. 花括号和引号之间如果有空格,将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

2. 条件渲染

2.1 wx:if

  • 在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
  data: {
    isShow:true,
  },

在这里插入图片描述
如果将isShow的值改为false, 那么 包含True字符的组件就不会再被渲染

在这里插入图片描述


2.2 wx:elif + wx:else

例一: wx:elif

  <!-- 条件渲染测试- wx:elif -->
  <view wx:if="{{isShow}}"> True </view>
  <view wx:elif="{{!isShow}}">False</view>

在这里插入图片描述

例二: wx:else

data: {
   flag: 1,
}
<!-- 条件渲染测试 wx:else -->
  <view wx:if="{{flag === 0}}"> {{flag}}</view>
  <view wx:elif="{{flag === 1}}">{{flag}}</view>
  <view wx:else="{{flag}}">{{flag}}</view>

在这里插入图片描述


2.3 block wx:if

  • 因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

在这里插入图片描述

  • 注意<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

2.4 wx:if vs hidden

  • 因为wx:if之中的模板也可能包含数据绑定, 所以wx:if的条件值切换时, 框架有一个局部渲染的过程, 因为它会确保条件块在切换时销毁或重新渲染
  • 同时wx:if也是惰性的, 如果在初始渲染条件为 false, 框架什么也不做, 在条件第一次变成真的时候才开始局部渲染
  • 相比之下, hidden就简单的多, 组件始终会被渲染, 只是简单的控制显示与隐藏
  • 一般来说, wx:if有更高的切换消耗hidden有更高的初始渲染消耗, 因此, 如果需要频繁切换的情景下, 用hidden更好, 如果在运行时条件不大可能改变则wx:if较好



所属网站分类: 技术文章 > 博客

作者:代码搬运工

链接:http://www.qianduanheidong.com/blog/article/192687/d5df88145a8611aeb149/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

5 0
收藏该文
已收藏

评论内容:(最多支持255个字符)