微信小程序列表實現

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