3．创建基金组件

基金列表通过组件循环渲染实现
所以首先要编写组件的代码
在components目录下新建item.wpy

关键代码如下

<template>
  <navigator url="detail">
    <view class="fund-item">
      <view class="fund-item-title">{{listData.name}}</view>
      <view class="link-icon light-word">></view>
      <view class="fund-item-content">
        <view>
          <view class="light-word" style="text-align:left;">金额</view>
          <view style="text-align:left;">{{listData.balance}}</view>
        </view>
        <view>
          <view class="light-word" style="text-align:center;">昨日收益</view>
          <view style="text-align:center;">{{listData.last_day_earn}}</view>
        </view>
        <view>
          <view class="light-word" style="text-align:right;">持有收益</view>
          <view style="text-align:right;">{{listData.carry_earn}}</view>
        </view>
      </view>
    </view>
  </navigator>
</template>
<script>
import wepy from 'wepy';
export default class Item extends wepy.component {
  props = {
    listData: {}
  };
}
</script>