微信小程序学习笔记-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 对象 使用相关参数方便观察

<swiper indicator-dots='true' previous-margin='50rpx' next-margin='50rpx'>

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

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

 <swiper-item>
    <view class='container'>
      <text>标题:{
  
  {testList[0].name}}</text>
      <text>元素:{
  
  {testList[