广告位联系
返回顶部
分享到

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

微信小程序 来源:互联网搜集 作者:秩名 发布时间:2020-03-05 12:05:58 人浏览
摘要

问题描述 学习小程序的小伙伴可能会有这样的问题:微信小程序的页面内容要发生改变,在小程序中如何快速的来创造一个格式相同,但仅仅改变内容且易于改变的页面呢?接下来就来解决这个问题吧。 解决方案 整体思路是创建一个数组,将页面内容写进数组,利用fo

问题描述

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

解决方案

整体思路是创建一个数组,将页面内容写进数组,利用for循环来达到遍历数组的目的,从而实现利用数组的变量来改变页面的内容。

第一步:首先在 js页面在 data 中创建一个数组名为 sums ,并在数组当中添加内容。

代码示例:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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 。

代码示例:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>
 
<text >{{item.textone}}</text>
 
</view>
 
<view class="imageone">
 
<image class="img-one" src="{{item.imgtwo}}" mode="aspectFill"></image>
 
<image class="img-two" src="{{item.imgthree}}"></image>
 
<text >{{item.texttwo}}</text>
 
</view>
 
</view>
 
</block>

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

第三步:添加css样式。

代码示例:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
.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;
 
}

最终效果:


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://mp.weixin.qq.com/s
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计