微信小程序学习笔记-2.1 wx.for 和 wx.if 的使用

2018/6/30

wx:for 和 wx:if 可以很方便的创建 wxml 元素

本例将用 swiper 内对象的创建来展示其效果

1. 前期准备

首先创建目录和工程文件 main

main.js 中，创建静态 list

data: {
    testList: [
      {
        name: "测试1",
        element: "测试1的相关内容",
        isHighLighted: true,
        id: 1
      },
      {
        name: "测试2",
        element: "测试2的相关内容",
        isHighLighted: false,
        id: 2
      }],
     
  },

在 main.wxml 中简单的创建一个 swiper 对象 使用相关参数方便观察

三个参数意思比较明显，在此不作详细解释

2.创建单个 swiper-item(使用wx:if)

 
    
      标题:{{testList[0].name}}
      元素:{{testList[0].element}}
      推荐
    
  

数据绑定获取 list 中第一个元素的全部属性并放置在 swiper-item 下的 view 元素中

wx:if 后的参数结果如果是 true ，则渲染该条 否则就不渲染

这个和 hidden 不一样，hidden 渲染但是不显示

效果如上

3.遍历创建 items(wx:for 的使用)

wx:for 后直接跟一个可迭代对象

自动产生了 item 和 index 两个属性 item 效果相当于每一个正在被遍历的元素

wx:for-items 效果与 wx:for 相同， wx:for-item 后跟别名（就是可以改变 'item' 取你要的 item 名）

 
    
      标题:{{item.name}}
      元素:{{item.element}}
      推荐
    
  

写法如上，结果如下

当然，你也可以定义固定的初始 swiper 页面

在 swiper 中添加 current="" 参数即可