wx:if 绑定数组图片如果图片名开头不为cloud则隐藏如何实现
时间: 2024-01-27 13:03:44 浏览: 56
可以通过在js文件中对图片数组进行遍历,筛选出符合条件的图片,并将其对应的wx:if属性设置为false,达到隐藏的效果。
以下是实现的示例代码:
```js
Page({
data: {
images: [
'cloud_image1.png',
'image2.png',
'cloud_image3.png',
'image4.png',
'cloud_image5.png'
]
},
onLoad: function () {
// 遍历图片数组,筛选出不符合条件的图片
const images = this.data.images.filter((item) => !item.startsWith('cloud'));
// 生成新的图片数组,将符合条件的图片对应的wx:if属性设置为false,达到隐藏的效果
const newImages = images.map((item) => {
return {
src: item,
show: true // 默认显示
}
});
this.setData({
images: newImages
})
}
})
```
在wxml中,可以使用wx:if属性绑定对应的show属性,实现条件渲染:
```html
<view wx:for="{{images}}" wx:key="src">
<!-- 如果show属性为true,则显示对应的图片 -->
<image wx:if="{{item.show}}" src="{{item.src}}"></image>
</view>
```
在以上示例中,我们首先根据图片名是否以'cloud'开头进行筛选,得到符合条件的图片数组,再生成新的图片数组(包含图片名和show属性,默认为true)。
在wxml中,通过wx:for遍历图片数组,使用wx:if绑定对应的show属性,实现条件渲染。当show属性为false时,对应的图片将被隐藏。
阅读全文