`

微信小程序学习之路《四》 数据渲染

 
阅读更多

微信小程序开发 - 数据渲染

 

 

当页面初始化完成将进行页面初次数据渲染,当逻辑层数据发生改变页面也会对改变的数据进行再次渲染。

 

小程序提供两种渲染标签:条件渲染、列表渲染

 

 

条件渲染

 

1、wx:if/wx:else

 

在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

 

也可以用 wx:elif 和 wx:else 来添加一个 else 块:

<view wx:if="{{length > 5}}"> 1 </view>

<view wx:elif="{{length > 2}}"> 2 </view>

<view wx:else> 3 </view>

 

2、block wx:if

 

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">

  <view> view1 </view>

  <view> view2 </view>

</block>

 

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

 

3、wx:if vs hidden



 

列表渲染

 

1、wx:for

 

在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

 

<view wx:for="{{array}}">

  {{index}}: {{item.message}}

</view>

 

Page({

  data: {

    array: [{

      message: 'foo',

    }, {

      message: 'bar'

    }]

  }

})

 

使用 wx:for-item 可以指定数组当前元素的变量名,

使用 wx:for-index 可以指定数组当前下标的变量名

 

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">

  {{idx}}: {{itemName.message}}

</view>

 

wx:for也可以嵌套,下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">

  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">

    <view wx:if="{{i <= j}}">

      {{i}} * {{j}} = {{i * j}}

    </view>

  </view>

</view>

 

2、block wx:for

 

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

 

<block wx:for="{{[1, 2, 3]}}">

  <view> {{index}}: </view>

  <view> {{item}} </view>

</block>

 

3、wx:key

 

详见文档:微信小程序 - wx:key

  • 大小: 46.1 KB
分享到:
评论

相关推荐

    微信小程序 教程之列表渲染

    微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的...

    微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)

    微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)微信小程序练习demo:数据绑定条件渲染练习...

    微信小程序中国行政区域地图数据

    在微信小程序开发中,地图功能是一项常见的需求,用于展示地理位置、导航或数据分析。"微信小程序中国行政区域地图数据"提供了一种解决方案,帮助开发者在小程序内绘制完整的中国行政区域地图。这一资源通常包括了...

    微信小程序源码-仿酷狗音乐微信小程序

    通过分析和学习这个“仿酷狗音乐微信小程序”的源码,开发者不仅可以提升微信小程序的编程技巧,还能对音乐类应用的常见功能有更深入的理解。同时,这也是一个很好的实战项目,帮助开发者将理论知识转化为实际操作...

    微信小程序学习demo:笑话大全;使用聚合数据API

    本项目是一个微信小程序的学习示例,名为“笑话大全”,它利用了聚合数据API来获取并展示各种幽默笑话。 首先,我们来深入了解一下微信小程序的开发环境。微信开发者工具是构建小程序的主要平台,它提供了代码编辑...

    微信小程序源码下载 微信小程序源码下载 2000套微信小程序源码

    本资源包含2000套微信小程序的源码,对于开发者来说是一份宝贵的参考资料,可以用来学习、研究或者作为开发新项目的起点。 源码下载是开发者获取程序原始代码的方式,对于学习和理解编程逻辑至关重要。这些微信小...

    基于微信小程序实现二十四节气小程序小程序源码分享

    【基于微信小程序实现二十四节气小程序】是一种利用微信开发者工具和微信小程序框架,结合中国传统文化中的二十四节气,设计和开发的小型应用程序。这个小程序旨在为用户提供关于二十四节气的相关信息,包括节气的...

    微信小程序Markdown渲染库.zip

    微信小程序Markdown渲染库是一款专为微信小程序设计的Markdown解析和渲染工具,允许开发者在小程序中展示Markdown格式的内容,为用户提供类似Markdown编辑器的功能。这款库通常用于博客、文档展示、笔记应用等场景,...

    微信小程序-美食列表源码

    "美食列表源码"是针对微信小程序开发者,特别是初学者的一个实践项目,它可以帮助学习者理解并掌握微信小程序的基本架构和开发流程。 在微信小程序的开发中,主要有以下几个关键知识点: 1. **WXML**: 这是微信小...

    微信小程序树形组件微信小程序树形组件

    在微信小程序的开发过程中,有时候我们需要实现树形结构的数据展示,比如组织架构、目录层级等,这时就需要用到微信小程序树形组件。 树形组件在微信小程序中的实现主要依赖于自定义组件和递归调用。自定义组件是...

    微信小程序电影小程序源码.zip

    微信小程序电影小程序源码是一个适合用于毕业设计、期末大作业或课程设计的项目,它涵盖了微信小程序开发的基础知识和电影信息展示的相关技术。这个压缩包包含的文件名为“电影小程序”,意味着里面可能包括了实现一...

    微信小程序表格合并demo

    在这个“微信小程序表格合并demo”中,我们可以学习到如何在微信小程序中实现表格的合并功能,这对于创建数据展示或者用户交互界面来说是非常重要的。 首先,我们要了解的是`index.js`文件,这是小程序的逻辑层,它...

    微信小程序Go、微信小程序OpenCV。.zip

    3. 在微信小程序前端,通过JavaScript与WASM模块交互,传递图像数据并接收处理结果。 4. 实现AR功能,可能涉及到标记检测、追踪、3D渲染等技术,使用户可以通过摄像头看到叠加在现实世界上的虚拟信息。 总的来说,...

    微信聊天微信小程序源码.zip

    总之,微信聊天微信小程序源码涉及到前端开发的多个方面,包括UI设计、网络通信、数据存储、用户交互等。理解并掌握这些知识点,将有助于我们开发出功能丰富、用户体验优良的小程序。在实际项目中,我们还需要关注...

    微信小程序项目实例——备忘录

    总结,这个“微信小程序项目实例——备忘录”涵盖了微信小程序的基础开发、前端设计、数据管理、用户交互等多个方面的知识点,为学习微信小程序开发提供了实用的示例。通过实践这样的项目,开发者可以深入理解微信小...

    100个微信小程序实例

    3. **数据绑定与渲染**:WXML和WXSS之间的数据绑定是微信小程序的核心特性之一。通过{{ }}表达式实现数据到视图的实时更新,掌握数据模型的改变如何影响视图层的呈现。 4. **API接口使用**:微信小程序提供了丰富的...

    微信小程序游戏源码-小游戏

    此外,开发微信小程序游戏时,开发者通常会利用微信小程序提供的生命周期函数来管理游戏状态,如`onLoad`用于加载游戏资源,`onReady`标志着页面渲染完成,可以开始游戏,`onTouchStart`和`onTouchMove`等则用于处理...

    微信小程序项目-美食列表

    2. **数据绑定**:微信小程序使用双括号`{{ }}`进行数据绑定,将后台数据动态渲染到界面上。例如,列表中的每项美食信息(如名称、图片、简介)都可以通过这种方式与后台数据关联。 3. **生命周期方法**:理解小...

    微信小程序教程.zip

    总之,这个“微信小程序教程”应该涵盖了从入门到进阶的全方位教学内容,帮助开发者从零开始学习和掌握微信小程序的开发技术,从而打造高质量的小程序应用。无论是初学者还是有经验的开发者,都能从中受益。

Global site tag (gtag.js) - Google Analytics