微信小程序利用for循环解决内容变更问题
163 浏览量
2020-11-21
02:10:50
上传
评论 1
收藏 112KB PDF 举报
微信小程序利用微信小程序利用for循环解决内容变更问题循环解决内容变更问题
问题描述问题描述
学习小程序的小伙伴可能会有这样的问题：微信小程序的页面内容要发生改变，在小程序中如何快速的来创造一个格式相同，
但仅仅改变内容且易于改变的页面呢？接下来就来解决这个问题吧。
解决方案解决方案
整体思路是创建一个数组，将页面内容写进数组，利用for循环来达到遍历数组的目的，从而实现利用数组的变量来改变页面
的内容。
第一步：首先在 js页面在 data 中创建一个数组名为 sums ，并在数组当中添加内容。
代码示例：
data: {
sums:[{
imgone:"/pages/img/ 一人之下 .jpg",
imgtwo:"/pages/img/ 天行九歌 .jpg",
imgthree:"/pages/img/ 播放 .png",
textone:" 一人之下 ",
texttwo:" 天行九歌 "
},{
imgone: "/pages/img/ 鬼灭之刃 .jpg",
imgtwo: "/pages/img/ 魁拔 .jpg",
imgthree: "/pages/img/ 播放 .png",
textone: " 鬼灭之刃 ",
texttwo: " 魁拔 "
},{
imgone: "/pages/img/ 擅长捉弄的高木同学 .jpg",
imgtwo: "/pages/img/ 镇魂街 .jpg",
imgthree: "/pages/img/ 播放 .png",
textone: " 擅长捉弄的高木同学 ",
texttwo: " 镇魂街 "
}
]
第二步：利用 for循环来遍历我们的数组 sums 。
代码示例：
<block wx:for="{{sums}}">
<view class="type-line">
<view class="imageone">
<image class="img-one" src="{{item.imgone}}" mode="aspectFill"></image>
<image class="img-two" src="{{item.imgthree}}"></image>
资源评论
