小程序基礎開發（二）：頁面數據渲染，多重for循環列表渲染。附字母索引的聯繫人列表dome

一，頁面數據渲染

1,數據渲染分爲2種，一種是直接的單個數據綁定，使用 Mustache 語法（雙大括號）將變量包起來，可以作用於：

wxml

<view> {{ message }} </view>
<view id="item-{{id}}"> </view>

js

Page({
  data: {
    id: 0，
    message: 'Hello MINA!'
  }
})

2,另一種的列表渲染，在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重複渲染該組件。
默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定數組當前元素的變量名，
使用 wx:for-index 可以指定數組當前下標的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

二，多重for循環列表渲染（嵌套渲染）

九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

二，利用雙層for渲染做一個聯繫人列表

用到的json數據：

[{
      "cooc_name": "阿噶熱達飛個",
      "cooc_class": "成人",
      "cooc_sex": "男",
      "cooc_papers_class": "身份證",
      "cooc_papers_no": "456456456464654565656",
      "cooc_code": "A",
      "cooc_id": "1"
    },
    {
      "cooc_name": "畢老",
      "cooc_class": "小孩",
      "cooc_sex": "男",
      "cooc_papers_class": "身份證",
      "cooc_papers_no": "456456456464654565656",
      "cooc_code": "B",
      "cooc_id": "5"
    },
    {
      "cooc_name": "兵工科",
      "cooc_class": "小孩",
      "cooc_sex": "男",
      "cooc_papers_class": "身份證",
      "cooc_papers_no": "456456456464654565656",
      "cooc_code": "B",
      "cooc_id": "6"
    },
    {
      "cooc_name": "蔡交客",
      "cooc_class": "小孩",
      "cooc_sex": "女",
      "cooc_papers_class": "身份證",
      "cooc_papers_no": "456456456464654565656",
      "cooc_code": "C",
      "cooc_id": "7"
    },
    {
      "cooc_name": "曹操",
      "cooc_class": "成人",
      "cooc_sex": "男",
      "cooc_papers_class": "身份證",
      "cooc_papers_no": "456456456464654565656",
      "cooc_code": "C",
      "cooc_id": "18"
    },
    {
      "cooc_name": "曹丿",
      "cooc_class": "成人",
      "cooc_sex": "男",
      "cooc_papers_class": "護照",
      "cooc_papers_no": "c456456456gfa4654565656",
      "cooc_code": "C",
      "cooc_id": "2"
    },
    {
      "cooc_name": "幹解開",
      "cooc_class": "成人",
      "cooc_sex": "男",
      "cooc_papers_class": "護照",
      "cooc_papers_no": "c456456456gfa4654565656",
      "cooc_code": "G",
      "cooc_id": "4"
    },
    {
      "cooc_name": "王噶大",
      "cooc_class": "成人",
      "cooc_sex": "男",
      "cooc_papers_class": "護照",
      "cooc_papers_no": "c456456456gfa4654565656",
      "cooc_code": "W",
      "cooc_id": "3"
    }
  ]

因爲我們需要做字母索引，所以先把首寫字母一樣的歸爲一個數組，用作雙層循環
wxml
注意事項：1，第一層循環想賦值首寫字母的時候，因爲code已經處於二維數組中，所以要加上[0]才能取到值。
2，在第一層循環wx:for="{{Codelist}}“時，寫上wx:for-item=“item"爲每次渲染的這塊數據命名，item[0].cooc_code即可渲染聯繫人的首寫字母
3，因爲第一層把渲染數據命名爲item,所以第二層的時候我們就需要循環渲染這塊數據wx:for=”{{item}}” wx:for-item=“item2”，並且將它命名爲tiem2（不可與上面重複）。而且第二次渲染單個數據時，就需用到第二次的命名item2.XXX了。

<!--pages/my/contact_list/contact_list.wxml-->
<cu-custom bgColor="bg-gradual-{{Theme}}" isCustom="{{true}}">
  <view slot="content">出遊人列表</view>
</cu-custom>
<scroll-view scroll-y class="indexes" scroll-into-view="indexes-{{listCurID}}" style="height:calc(100vh - {{CustomBar}}px - 50px)" scroll-with-animation="true" enable-back-to-top="true">
  <checkbox-group bindchange="checkboxChange">
  <block wx:for="{{Codelist}}" wx:key wx:for-item="item">
    <view class="padding indexItem-{{item[0].cooc_code}}" id="indexes-{{item[0].cooc_code}}" data-index="{{item[0].cooc_code}}">{{item[0].cooc_code}}</view>
    <view class="cu-list menu-avatar no-padding">
      <view class="cu-item solid4-bottom" wx:for="{{item}}" wx:key="index2" wx:for-item="item2">
        <view class="cu-avatar sm">
          <checkbox class="red" value="{{item2.cooc_id}}" checked="{{item2.checked}}"></checkbox>
        </view>
        <view class="content">
          <view class="text-black text-df">
            <text class="{{item2.cooc_sex=='男'?'cuIcon-male text-blue':'cuIcon-female text-red'}} margin-right-xs"></text>
            <text class="cooc_name">{{item2.cooc_name}}</text>
            <text class="text-grey cooc_class">（{{item2.cooc_class}}）</text>
          </view>
          <view class="text-gray text-lg"><text class="cuIcon-card margin-right-xs"></text>{{item2.cooc_papers_no}}</view>
        </view>
      </view>
    </view>
  </block>
  </checkbox-group>
</scroll-view>
<view class="indexBar" style="height:calc(100vh - {{CustomBar}}px - 50px)">
  <view class="indexBar-box" bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
    <view class="indexBar-item" wx:for="{{list}}" wx:key id="{{index}}" bindtouchstart="getCur" bindtouchend="setCur">{{list[index]}}</view>
  </view>
</view>
<!--選擇顯示-->
<view hidden="{{hidden}}" class="indexToast">
  {{listCur}}
</view>
<view class="flex bottom_button">
  <button class="cu-btn flex-sub lg bg-green" bindtap="binAdd">新增</button>
  <button class="cu-btn flex-sub lg bg-red" bindtap="{{binRight}}">{{binRightText}}</button>
</view>

右邊的字母索引，只需把26個字母循環賦值即可

let list = [];
    for (let i = 0; i < 26; i++) {
      list[i] = String.fromCharCode(65 + i)
    }
    this.setData({
      list: list,
      listCur: list[0]
    })

再添加點擊事件，滑動事件，選中字母顯示事件，通過動態賦值scroll-into-view跳轉到對應的字母位置。

<view class="indexBar" style="height:calc(100vh - {{CustomBar}}px - 50px)">
  <view class="indexBar-box" bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
    <view class="indexBar-item" wx:for="{{list}}" wx:key id="{{index}}" bindtouchstart="getCur" bindtouchend="setCur">{{list[index]}}</view>
  </view>
</view>

1，scroll-into-view主要作用是用於滾動到指定元素的位置，其對應值是元素的id
2，scroll-into-view 的值必須是動態的，通過setData賦值後，重新渲染纔會有效。
3，如果設置scroll-view高度爲百分比的話，父容器一定要固定高度，否則無效。height:100%是無效時可以設置爲height:100vh代替。

//獲取文字信息
  getCur(e) {
    this.setData({
      hidden: false,
      listCur: this.data.list[e.target.id],
    })
  },

  setCur(e) {
    this.setData({
      hidden: true,
      listCur: this.data.listCur
    })
  },
  //滑動選擇Item
  tMove(e) {
    let y = e.touches[0].clientY,
      offsettop = this.data.boxTop,
      that = this;
    //判斷選擇區域,只有在選擇區纔會生效
    if (y > offsettop) {
      let num = parseInt((y - offsettop) / 20);
      this.setData({
        listCur: that.data.list[num]
      })
    };
  },

  //觸發全部開始選擇
  tStart() {
    this.setData({
      hidden: false
    })
  },

  //觸發結束選擇
  tEnd() {
    this.setData({
      hidden: true,
      listCurID: this.data.listCur
    })
  },
  indexSelect(e) {
    let that = this;
    let barHeight = this.data.barHeight;
    let list = this.data.list;
    let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
    for (let i = 0; i < list.length; i++) {
      if (scrollY < i + 1) {
        that.setData({
          listCur: list[i],
          movableY: i * 20
        })
        return false
      }
    }
  }