WeChatミニプログラム（1）-データバインディング

最近、教師がクラスに参加するためのサインインシステムに取り組んでいて、最終的にWeChatアップルレットを使用してそれを完了することにしました。今日は、リストのバインドを要約します。

機能：私が作成したページはクラスリストを表示するためのものなので、背景はteachclassListを返します

最終的な効果を次の図に示します。

Wxmlページコード：

  <view  class="touch-item {
    
    {
    
    item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{
    
    {
    
    index}}" style="display:flex;" bindtouchstart="touchstart" bindtouchmove="touchmove" 
  wx:for="{
    
    {
    
    items}}" wx:key=""
   bindtap="detail" data-id="{
    
    {
    
    item.teachClassId}}">

    <!-- 左侧图片 -->
    <view class="content content-left">
      <image src="/images/heart249.png" style="width:50px;height:50px;" mode='aspectFill'></image>
    </view>

    <!-- 右侧区域：上：课程；下：教师名称 -->
    <view class="content content-right"  >
      <view >班名：{
    
    {
    
    item.teachclassName}}</view>
      <view >班号：{
    
    {
    
    item.teachclassCode}}</view>
       <view >教师：{
    
    {
    
    item.teacherName}}</view> 
    </view>
      <!-- <view class="del"  catchtap="del" data-index="{
    
    {
    
    index}}">删除</view> -->
  </view>

jsコード

  //根据教师id，查询上课班
  getTeachClass: function () {
    
    
    var that = this;
    wx.request({
      url: 'https://dmsdbj.com/sign-web/sign/queryTeachclassInfo/' + wx.getStorageSync('userId'), 
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
    
    
        console.log(res.data);
        that.setData({
          items: res.data.data
        });
      }
    })
  },