微信小程序 - ListView1 - 静态数据

demo 地址: https://github.com/iotjin/Jh_weapp

效果图：

js 代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataArr: [
      {
        text: 'text1',
        money:'12.9'
      },
      {
        text: 'text2',
        money: '20.9'
      },
      {
        text: 'text3',
        money: '330.9'
      },

    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    wx.setNavigationBarTitle({
      title: '静态数据'
    })
  },


})

wxml 代码：

<view class="cell-bg" wx:for="{{dataArr}}" wx:key="index">
  <view class="row1">
    <view class="text">{{item.text}}</view>
    <view class="money">{{item.money}}</view>
  </view>
</view>


<!-- <view class="flex-container">
  <view class="flex-item">flex item 1</view>
  <view class="flex-item">flex item 2</view>
</view> -->

wxss 代码：

.cell-bg {

  background-color: white;
  height: 120rpx;
  border-bottom: 1px solid rgb(230, 230, 230);
}

.row1 {

  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.leibie {
  font-size: 34rpx;
  color: black;

}

.money {
  font-size: 32rpx;
  color: black;
  font-weight: bold;
}

.flex-container {
  display: flex;
  width: 100%;
  height: 140rpx;
  background-color: lightgrey;
  justify-content: space-between;
}

.flex-item {
  background-color: cornflowerblue;
  margin: 10px;
}