1、wx:for
wx:for指令用于循环数组数据,生成组件。
循环出来的每一项通过item返回,每一项对应的索引,通过index返回。
<view wx:for="{{songs}}" wx:key="index" class="items">
<text>{{index}}--{{item.id}}--{{item.name}}</text>
</view>
2、wx:key
wx:key="",设置每一项唯一的标识。循环列表时,添加wx:key的好处是,将来列表发生变化时重新渲染列表的损耗为更低。
条件渲染
条件圆凯弊渲染可以使用wx:if或hidden。
一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此孙岁,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
1、wx:if
wx:if用于条件渲染:条件为真生成里面的内容,条件为假不会生成里面的内容。(每橘族次重新生成内容)
也可以用wx:elif 和 wx:else 来添加一个 else 块。
<view wx:if="{{typeID == 1}}"> 1 </view>
<view wx:elif="{{typeID == 2}}"> 2 </view>
<view wx:else> 3 </view>
2、hidden
hidden用于条件渲染:条件为真隐藏里面的内容,条件为假显示里面的内容。(每次切换样式)
<view hidden="{{typeID!= 2}}"> 1 </view>
这个问题,如果条件允许,最好在后台程序中解决,在后台读取出图片路径数据后,立刻就分割为数组,然后把所有数据按json格式返回给小程序,小程序再把它放入page的data中,这样小程序无须大的改动就能显示图片了。如果这个办法行不通,也可以在小程序获得后台返回的json数据后,先把其中的图片路径数据(即用:分隔的多个图片路径的字符串)用split分割为数组,再放入page的data中,这样小程序的wxml文件也不需要大改就能显示多个图片了。
如果实在懒得很,后台返回的数据一股脑的直接放到page的data中,那么还有帆缓顷最后的一种解决办法,就是在wxml文件中通过小程序自身的wxs语言实时分割路径字符串,比如(假定图片字段名为image):
<wxs module="fun"> module.exports = { imgPathSplit: function(s) { if (s) return s.split(":") } }</wxs>
然后在需要循环显示图片的地方加入代码(只是示例哪昌):态陆
<image wx:for="{{fun.imgPathSplit(item.image)}}" wx:key="*this" mode="aspectFill" src="{{item}}"></image>
这样,在小程序渲染页面时就会实时对路径字符串进行分割,再循环显示出图片来。
方法/步骤
在小程序中为了实现一个中添加多个内容重复的标签,那就需要使用循环。如果按小程序的简易教程,循环加在中,而放在里面。所有数据都会遍历到每一个中。这不是我们想要的。
请点击输入图片描述
在微信小程序中有个属性,是指当点击列表元素时当按下鼠标左键会显示样式,但是鼠标离开样式就会复原.
请点击输入图片描述
核心点:模板文件中使用三元运算符,通过dateCurrent指定当前item的id。
请点击输入图片描述
在组件上使用控制属性绑定一个数组,即可使用数组中拆携明各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的隐判变量名默认为item 事例。
请点击输入图片描述
接着用在标签上,以渲染一个包含多节点的结构块。
请旅告点击输入图片描述
接着只需要把放入文件中就可以,把循环数据绑定到上就可以了。
请点击输入图片描述
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)