小程序：组件使用、数据绑定、条件渲染、列表渲染

逃离我推掉我的手 2022-01-25 14:52 521阅读 0赞

准备工作：

新建一个quickstart项目，然后再pages目录下自己新建一个页面，例如t文件夹名为test，再在其下分别新建test.wxml、test.js、test.wxss文件。最后在app.json全局配置文件中配置test页面路径，项目结构如下：

项目结构图

1.组件的基本使用

小程序开发文档中组件部分有很多组件介绍，包含视图容器类组件，基础内容类组件、表单组件、导航组件、媒体组件、地图组件和画布组件等。选几个常用的组件介绍其用法。

text组件可以直接显示文本文字，button组件显示就是按钮，按钮有default、primary、warn三种type类型，颜色分别是默认灰，原始绿、警告红。text和button组件的使用如下：

text和button组件的使用

可以在js文件中使用bindtap属性为button绑定事件。当点击按钮时，下方显示一行文字，变量是使用mustache语法绑定的。

注意：WXML中所有动态的数据都是来自对应Page中的data。如下：

js代码

效果如如下：

效果图

2.数据绑定和条件渲染

简单的数据绑定是使用 Mustache 语法（双大括号）将变量包起来，如上方的<text>{ {msg}}</text>语句是绑定msg变量的方法。

WXML 中的动态数据均来自对应 Page 的 data。

1.数据绑定可以作用在条件语句wx:if和wx:else中，如：

  1. <!-- test.wxml -->
  2. <!-- 试图容器部分view组件 -->
  3. <view>大家好，我是南南</view>
  4. <!--基础内容部分text组件-->
  5. <text>text直接显示文本</text>
  6. <!-- 表单组件中button组件 ，有3种类型-->
  7. <!-- 为button绑定内容 -->
  8. <button type='primary' bindtap='btnClick'>primary原始绿</button>
  9. <!-- condition为true，条件1显示，为false条件2显示 -->
  10. <text wx:if="{ {condition}}">我是条件1</text>
  11. <text wx:else>我是条件2</text>

在js中改变condition的值，每次点击按钮时内容改变：

  1. /** test.js **/
  2. Page({ 
  4.   /** * 页面的初始数据 */
  5.   data: { 
  6.     // msg: "testing"
  7.     condition: true
  8.   },
  10. // 自己定义的函数
  11.   btnClick: function() { 
  12.     var condition = this.data.condition;
  13.     console.log(condition);
  14.     // 使用setData()函数赋值
  15.     this.setData({ condition:!condition});
  16.   }
  17. })

实现的效果是默认显示条件1，点击按钮显示条件2，循环变化：

数据绑定效果展示

2.在框架中，使用 wx:if=”” 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块。

  1. <view wx:if="{ {length > 5}}"> 1 </view>
  2. <view wx:elif="{ {length > 2}}"> 2 </view>
  3. <view wx:else> 3 </view>

3.因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

  1. <block wx:if="{ {true}}">
  2.   <view> view1 </view>
  3.   <view> view2 </view>
  4. </block>

详情参考

如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。因为wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。

3.列表渲染

1.在组件上，使用wx:for绑定一个数据，遍历次数据，就可以使用数组中的各项元素重复渲染该组件。

小程序中默认数组的当前下标变量名为index，当前元素变量名为item。

wx:for列表渲染的使用

也可以自己再重新定义列表索引和当前列表元素的变量名，使用wx:for-index指定索引变量名，使用wx:for-item指定当前元素变量名。如：

指定变量名效果

2.wx:for也可以嵌套使用。

3.列表渲染wx:for和条件渲染wx:if类似，也可以将wx:for用在<block/>标签上，以渲染一个包含多个节点的解构块。如：

  1. <block wx:for="{ {[1, 2, 3]}}">
  2.   <view> {
  3.    {index}}: </view>
  4.   <view> {
  5.    {item}} </view>
  6. </block>

wx:for有两点需要注意：

1.当wx:for数组是字符串时，会将字符串解析成字符串数组。如：

效果图

  1. <text wx:for='555'>

等同于:

  1. <text wx:for={ { '5','5','5'}}>

2.如果mustache语法的大括号}与双引号”之间有空格，最终会被解析为字符串。例一：

效果图

例二：

效果2

列表详情参考

每天进步一点点、充实一点点、加油！！！

发表评论

表情：
评论列表 （有 0 条评论，521人围观）

还没有评论，来说两句吧...

相关阅读