需求是這樣的：
需要根據後臺傳入的資料動態生成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
}