问题描述
学习小程序的小伙伴可能会有这样的问题：微信小程序的页面内容要发生改变，在小程序中如何快速的来创造一个格式相同，但仅仅改变内容且易于改变的页面呢？接下来就来解决这个问题吧。
解决方案
整体思路是创建一个数组，将页面内容写进数组，利用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;} |
最终效果：
原文链接：https://mp.weixin.qq.com/s
相关文章
