微信小程序列表实现

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