1.在 .json文件中使用 navigationBarTitleText定义当前窗口title
{"navigationBarTitleText": "小程序列表实现"
}
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
}
3.在 .js文件中 data下加入数据源
Page({data: {// 数据源language:["Java","C","C++","Python",".NET","C#","JavaScript", "SQL","PHP",// 更多数据...]},onLoad: function () {},
})
4.在 .wxml文件中编写如下：
<view class='container'><block wx:for="{{language}}" wx:key="index"><view class='text-content'>{{item}}</view> </block>
</view>
- 使用
{{ }}引入数据。 wx:for循环遍历集合。wx:key为下标。
案例地址：https://github.com/mengjingbo/minicode-list-view
