WeChat Mini Program (1)-Data Binding

Recently I was working on a sign-in system for teachers to attend classes, and finally decided to use the WeChat applet to complete it. Today I will summarize the binding of the list.

Function: The page I made is to display the class list, so the background returns a teachclassList

The final effect is shown in the figure below:

Wxml page code:

  <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 code

  //根据教师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
        });
      }
    })
  },