1. 程式人生 > >微信小程式實現View子節點每行固定顯示數目,多出來自動換行

微信小程式實現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
}