家庭记账本小程序开发第三天

今天把账单页面优化了一下：

调用onload函数直接加载数据，并且对于呈现出来的历史账单实现了隔行换色渲染，并使用了flex布局使页面看上去更有用户体验。

如下图：

 

 修改后的js：

// pages/B/index.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    date:'',
    money:'',
    type:'',
    style:'',
    ty:[[],[]],

  },
  show: function () {
    // var that=this;
    // wx.request({
    //   url: 'http://localhost:8080/Tally/WXServletShow',
    //   data: {
    //     username: '刘子煜',
    //     password: '123'
    //   },
    //   method: 'POST',
    //   header: {
    //     //'content-type': 'application/json' // 默认值
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //   },
    //   success: function (res) {
    //     console.log(res.data);
    //     var ty1 = res.data.data;
    //     that.setData({
    //       ty:ty1 

    //     });
    //     // console.log(ty[0].date);
    //   },
    //   fail: function (res) {
    //     console.log(".....fail.....");
    //   }
    // })
  },
  onLoad: function (option) {
    var that = this;
    wx.request({
      url: 'http://localhost:8080/Tally/WXServletShow',
      data: {
        username: '刘子煜',
        password: '123'
      },
      method: 'POST',
      header: {
        //'content-type': 'application/json' // 默认值
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(res.data);
        var ty1 = res.data.data;
        that.setData({
          ty: ty1

        });
        // console.log(ty[0].date);
      },
      fail: function (res) {
        console.log(".....fail.....");
      }
    })

    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', { data: 'test' });
    eventChannel.emit('someEvent', { data: 'test' });
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function (data) {
      console.log(data)
    })
  }
})

修改后的wxml：

<!--pages/B/index.wxml-->
<view class="container">
<view class='tr tallying'>
<view class='th'>日期</view>
<view class='th'>金额</view>
<view class='th'>类型</view>
<view class='th'>说明</view>
</view>
<block wx:for="{{ty}}">
<view wx:if="{{index % 2 == 0}}" class="tr bg-g">
<view class="date1">{{item.date}}</view>
<view class="money1">{{item.money}}</view>
<view class="type1">{{item.type}}</view>
<view class="style1">{{item.style}}</view>
</view>
<view class="tr" wx:else>
<view class="date1">{{item.date}}</view>
<view class="money1">{{item.money}}</view>
<view class="type1">{{item.type}}</view>
<view class="style1">{{item.style}}</view>
</view>
</block>
</view>

修改后的wxss：

/* pages/B/index.wxss */
.container{
  display: flex;
  flex-direction: column;
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.th {
  width: 30%;
  justify-content: center;
  background:skyblue;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
}
.bg-g{
  background: #E6F3F9;
}
.date1{
  width:30%;
    justify-content: center;
    text-align: center;
}
.money1{
  width:30%;
    justify-content: center;
    text-align: center;
}
.type1{
  width:30%;
    justify-content: center;
    text-align: center;
}
.style1{
  width:30%;
    justify-content: center;
    text-align: center;
}