微信小程序实现View子节点每行固定显示数目，多出来自动换行

需求是这样的：
需要根据后台传入的数据动态生成view控件，固定每行展示三个，多出来的自动换行。

---

如果用js来写想必比较简单，由于接触微信小程序时间不算太长，对于前端的一些写法难免运用不是很熟练。
这是我的目录结构：

相关的思路我已经在代码里打了注释了， 直接上代码吧。
linkBook.js

//获取应用实例
var app = getApp()
Page({
  data: {
    // 后台数据结构获取参照前台js数据结构
    linkBookData:[
      {
        id: 'P_A',
        name: '物业服务',
        child: [
          {
            id: 'A',
            name: '物业电话',
            tel: '23',
            img: '../../images/linkBook/shentong.png'
          },
          {
            id: 'B',
            name: '物业投诉',
            tel: '321-8888',
            img: '../../images/linkBook/shentong.png'
          }
        ]
      },
      {
        id: 'P_B',
        name: '社区及公安电话',
        child: [
          {
            id: 'A',
            name: '公安局派出所',
            tel: '123',
            img: '../../images/linkBook/policeMan.png'
          },
          {
              id: 'B',
              name: '户口迁移办理电话：',
              tel: '321',
              img: '../../images/linkBook/policeMan.png'
          },
          {
              id: 'C',
              name: '街道',
              tel: 'ewew',
              img: '../../images/linkBook/sjcwy.png'
          }
        ]
      },
      {
        id: 'P_B',
        name: '社区及公安电话',
        child: [
          {
            id: 'A',
            name: '公安局派出所',
            tel: '123',
            img: '../../images/linkBook/policeMan.png'
          },
          {
              id: 'B',
              name: '户口迁移办理电话：',
              tel: '321',
              img: '../../images/linkBook/policeMan.png'
          },
          {
              id: 'C',
              name: '街道',
              tel: 'ewew',
              img: '../../images/linkBook/sjcwy.png'
          },
          {
            id: 'C',
            name: '街道',
            tel: 'ewew',
            img: '../../images/linkBook/sjcwy.png'
        }
        ]
      }
    ]
  },
  //拨打电话事件
  phone: function (e) {
    var tel = e.target.dataset.tel;
    wx.showModal({
      title: '提示',
      content: '确定拨打电话：' + tel + ' ? ',
      success: function (res) {
        if (res.confirm) {
          wx.makePhoneCall({
            phoneNumber: tel,
            success: function (res) {
              // success
            }
          });
          console.log('用户点击确定拨打电话')
        } else {
          console.log('用户点击取消拨打电话')
        }
      }
    });
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    // app.getUserInfo(function (userInfo) {
    //   //更新数据
    //   that.setData({
    //     userInfo: userInfo
    //   })
    // })
  }
})

linkBook.wxml

<!-- 引入自定义函数 -->
<wxs module="filters" src="toInt.wxs"></wxs>

<view class="container">
  <!-- view容器嵌套， 可设置多页翻滚效果 -->
  <view>
    <block wx:for="{{linkBookData}}" wx:for-index="i" wx:for-item="item_i" wx:for-key="key_i">
      <view class="service-title">
        {{item_i.name}}:
      </view>
      <!-- 每行展示三个，只有两种情况：
           1-刚好是3的倍数，这种情况直接使用结果循环 
           2-不是三的倍数， 这种情况需要对结果取整数，然后+1 
           0  1  2    
           3  4  5
           6  7  8
           以上为child坐标数据，最里面循环值始item_k终为0  1  2  第二层循环值item_j为： 0  1  2  3  4  5  6...
           从中可以发现规律：坐标数据 = item_j * 3 + item_k
      -->
      <block wx:for="{{item_i.child.length % 3 == 0 ? item_i.child.length/3 : filters.toFix(item_i.child.length/3) + 1}}" wx:for-index="j" wx:for-item="item_j" wx:for-key="key_j">
          <view class="services">
            <!-- 固定每行只展示三条记录数 -->
            <block wx:for="{{3}}" wx:for-index="k" wx:for-item="item_k" wx:for-key="key_k">
              <view>
                <!-- 如果没有图片属性，则默认当前模块不可用！ -->
                <image bindtap="phone" data-tel="{{item_i.child[item_j * 3 + item_k].tel}}" src="{{item_i.child[item_j * 3 + item_k].img}}" 
                       wx:if="{{item_i.child[item_j * 3 + item_k].img != null}}"></image>  
                <text>{{item_i.child[item_j * 3 + item_k].name}}</text>
              </view>
            </block>
          </view>
      </block>
    </block>      
  </view>
</view>

linkBook.wxss

/**index.wxss**/
page{
  background: #f9f9f9;
}
.container{
  padding: 32rpx;
  height: 100%
}
.service-title{
  padding: 32rpx 0 0 48rpx;
  font-size: 38rpx;
}
.services{
    display: flex;
    display: -webkit-flex;
    box-sizing: border-box;
}
.services view{
    box-sizing: border-box;
    /* border: 1rpx solid #ccc; */
    flex: 1;
    -webkit-flex: 1;

    /*background: #f1f1f1;*/
    text-align: center;
    padding: 32rpx 0;

}
.services view image{
  width: 120rpx;
  height: 120rpx;
}
.services view text{
  display: block;
}

toInt.wxs

var filters = {
  toFix: function (value) {
    //return value.toFixed(2)//此处2为保留两位小数
    return parseInt(value);  //此处为获取整数，不进行四舍五入操作
  }
}
module.exports = {
  toFix: filters.toFix
}