下面是关于“微信小程序 wx:for遍历循环使用实例解析”的详细攻略。
一、wx:for概述
在微信小程序中,我们经常需要在页面上展示列表数据。wx:for是一种循环渲染数据的方式,可以用来遍历一个数组,并将数组中的每个元素渲染到页面上。
二、wx:for使用方法
<view wx:for="{{array}}" wx:key="*this">{{item}}</view>
上面的代码中,array是你要遍历的数组名;item是数组中当前遍历到的元素。wx:key用于指定列表中的每个项目的唯一标识符,必须指定,如果不指定会有警告提示。
三、wx:for示例1
下面是一个简单的wx:for的示例。先展示一下数组的内容:
// js文件
Page({
data: {
fruits: [
{name: '苹果', price: '2.5'},
{name: '香蕉', price: '1.5'},
{name: '橘子', price: '3.0'}
]
}
})
在page中使用wx:for循环遍历数组,将每个元素的名称和价格都渲染到页面上:
<!-- wxml文件 -->
<view wx:for="{{fruits}}" wx:key="name">
<text>{{item.name}}</text>
<text>{{item.price}}元/斤</text>
</view>
上面的代码中,wx:key="name"指定了每个元素的唯一标识符为name。
四、wx:for示例2
下面是一个稍微复杂一些的wx:for的示例。首先,展示一下数组的内容:
// js文件
Page({
data: {
books: [
{name: 'JavaScript高级程序设计', author: 'Nicholas C.Zakas', id: 1},
{name: '深入浅出Node.js', author: '朴灵', id: 2},
{name: '你不知道的JavaScript', author: 'Kyle Simpson', id: 3}
]
},
deleteBook: function(e) {
var id = e.currentTarget.dataset.id;
var books = this.data.books.filter(function(v) {
return v.id != id;
});
this.setData({
books: books
});
}
})
在页面中使用wx:for循环遍历数组,将书名、作者和删除按钮都渲染到页面上,同时给删除按钮绑定一个事件,根据书籍id从数组中删除对应的书籍:
<!-- wxml文件 -->
<view wx:for="{{books}}" wx:key="id">
<text>书名:{{item.name}}</text>
<text>作者:{{item.author}}</text>
<button data-id="{{item.id}}" bindtap="deleteBook">删除</button>
</view>
上面的代码中,wx:key="id"指定了每个元素的唯一标识符为id,在绑定删除事件时,使用dataset可以获取到当前书籍的id。
以上就是关于“微信小程序 wx:for遍历循环使用实例解析”的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序 wx:for遍历循环使用实例解析 - Python技术站