微信小程序列表实现

1.在 .json文件中使用 navigationBarTitleText定义当前窗口title

{
"navigationBarTitleText": "小程序列表实现"
}
1
2
3
2.在 .wxss文件中编写如下：

// page设置当前窗口背景色
page{
background-color: #F5F5F5
}

// 定义.container设置容器样式
.container{
padding: 10px 20px;
align-content: center;
}

// 定义.text-content设置文本样式
.text-content{
padding: 10px;
align-content: center;
border-bottom: 1rpx solid #F5F5F5;
background-color: #FFFFFF
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
3.在 .js文件中 data下加入数据源

Page({

data: {
// 数据源
language:[
"Java",
"C",
"C++",
"Python",
".NET",
"C#",
"JavaScript",
"SQL",
"PHP",
// 更多数据...
]
},

onLoad: function () {

},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
4.在 .wxml文件中编写如下：

<view class='container'>
<block wx:for="{{language}}" wx:key="index">
<view class='text-content'>{{item}}</view>
</block>
</view>
1
2
3
4
5
使用 {{ }}引入数据。
wx:for循环遍历集合。
wx:key为下标。

案例地址：https://github.com/mengjingbo/minicode-list-view
————————————————
版权声明：本文为CSDN博主「秦川小将」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mjb00000/java/article/details/90482526