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[0].element}}</text> <text style="color:red" wx:if="{{testList[0].isHighLighted}}">推荐</text> </view> </swiper-item> 数据绑定获取 list 中第一个元素的全部属性并放置在 swiper-item 下的 view 元素中
wx:if 后的参数结果如果是 true ，则渲染该条 否则就不渲染
这个和 hidden 不一样，hidden 渲染但是不显示
效果如上
3.遍历创建 items(wx:for 的使用)
wx:for 后直接跟一个可迭代对象
自动产生了 item 和 index 两个属性 item 效果相当于每一个正在被遍历的元素
<swiper-item wx:for='{{testList}}'> <view class='container'> <text>标题:{{item.name}}</text> <text>元素:{{item.element}}</text> <text style="color:red" wx:if="{{item.isHighLighted}}">推荐</text> </view> </swiper-item>写法如上，结果如下
当然，你也可以定义固定的初始 swiper 页面
在 swiper 中添加 current="" 参数即可