微信小程序（一）—— 数据绑定

最近在做一款应用于教师上课的签到系统，最终决定使用微信小程序来完成，今天就来总结一下列表的绑定

功能：我做的页面是显示上课班列表，所以后台返回一个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
        });
      }
    })
  },