好资源导航 » 文章资讯 » 微信小程序利用for循环解决内容变更问题

微信小程序利用for循环解决内容变更问题

2023-07-29 19:23:04 73

问题描述

学习小程序的小伙伴可能会有这样的问题：微信小程序的页面内容要发生改变，在小程序中如何快速的来创造一个格式相同，但仅仅改变内容且易于改变的页面呢？接下来就来解决这个问题吧。

解决方案

整体思路是创建一个数组，将页面内容写进数组，利用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 。

代码示例：











{{item.textone}}









{{item.texttwo}}

利用for循环所循环的数组，此处的 item代表数组所循环此处的元素。

第三步：添加css样式。

代码示例：

.type-line{

display:flex;

flex-flow:row;

justify-content:space-evenly;

}

.search{

margin-top:5px;

margin-left:50px;

width:160px;

height:25px;

border-radius:20px;

background-color:whitesmoke

}

.titleone{

width:100%;

height:50px;

display:flex;

flex-flow:row

}

.imagesize{

width:20px;

height:20px;

}

.images{

width:40px;

height:40px;

margin-left:15px;

border-radius:50%;

}

.boxs{

width:100px;

height:30px;

}

.imagesone{

margin-left:60px;

width:25px;

height:25px;

margin-top:5px;

}

.imageone{

margin-top:20px;

width:180px;

height:150px;

border-radius:10px;

background-color:whitesmoke;

}

最终效果：

总结

到此这篇关于微信小程序利用for循环解决内容变更问题的文章就介绍到这了,更多相关小程序内容变更内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

微信小程序利用for循环解决内容变更问题

热门推荐

随机推荐