10--微信小程序card + 跳转(获取index)

页面block：

<view>
  <view class="page_hd">
    <navigator class="create" url="/pages/teacher/banji/add">创建班级</navigator>
    <navigator class="join" url="/pages/teacher/banji/join">加入班级</navigator>
  </view>
  <block wx:for="{{cards}}" wx:key="id">
    <tui-card image="{{item.img}}"  data-index="{{index}}" bind:click="dianji"  title="{{item.title}}" tag="{{item.tag}}">
      <view slot="body" class="tui-default">
        学生：{{item.studentcount}}人，教师：{{item.teachercount}}人
      </view>
      <view slot="footer" class="tui-default">
        本班由{{item.creator}}于{{item.createtime}}创建
      </view>
    </tui-card>
  </block>
</view>

js：

//获取应用实例
const app = getApp()
var util = require('../../utils/util.js')
Component({
  data: {
    cards: []
  },
  properties: {

  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function() {
      this.readdata()
    }
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function() {
      this.readdata()
    }
  },
  ready: function() {

  },
  methods: {
    getinfo: function() {
      let token = wx.getStorageSync('token')
      wx.request({
        url: app.globalData.b_info,
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          'cookie': token
        },
        data: {
          token
        },
        //成功后
        success: res => {
          console.log(res.data)
          let list = Array.prototype.slice.call(res.data);
          list.forEach(item => {
            let img = {
              url: "/static/images/my_banji.png",
              width: 80,
              height: 80,
              circle: true
            }
            let title = {
              text: item.classname,
              color: "#1C9ADC",
              size: 34
            }
            let tag = {
              text: util.formatTimeToYmd(item.jointime) + '加入',
              color: "#1C9ADC",
              size: 28
            }
            let header = {
              bgcolor: "F7F7F7",
              line: true
            }
            item['classid'] = item.classid
            item['creator'] = item.creator
            item['img'] = img
            item['title'] = title
            item['tag'] = tag
            item['header'] = header
            item['createtime'] = util.formatTimeToYmd(item.createtime)
          })
          this.setData({
            cards: list
          })
          // console.log(list)
          wx.setStorageSync('teacherinfo', list)
        }
      }) //结束
    },

    //读取数据
    readdata: function() {
      let data = wx.getStorageSync('teacherinfo')
      if (data) {
        this.setData({
          cards: data
        })
      } else {
        this.getinfo()
      }
    },

    //跳转事件
    dianji: function(e) {
      var index = e.currentTarget.dataset.index
      console.log(index)
      wx.setStorageSync('index', index)
      wx.navigateTo({
        url: '/pages/teacher/banji/detail',
      })
    }
  },


})

json：

{
  "component": true,
  "usingComponents": {
    "tui-card": "/static/thorui/components/card/card",
    "tui-tag": "/static/thorui/components/tag/tag",
    "tui-list-cell": "/static/thorui/components/list-cell/list-cell",
     "tui-button": "/static/thorui/components/button/button"

  }
}

样式：

page {
  background: #ededed;
  padding-bottom: 42px;
}

.page_hd {
  padding-top: 12px;
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.create, .join {
  width: 75px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  background-color: #1c9adc;
  font-size: 13px;
}

.create {
  margin-left: 15px;
  border-radius: 0 30px 30px 0;
}

.join {
  margin-right: 15px;
  border-radius: 30px 0 0 30px;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.tui-title {
  width: 100%;
  padding: 70rpx 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  line-height: 30rpx;
  color: #666;
}

.tui-default {
  padding: 20rpx 30rpx;
}

.tui-article {
  position: relative;
}

.tui-article-img {
  width: 100%;
  height: 300rpx;
  display: block;
}

.tui-article-title {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
}

.tui-cell-title {
  font-size: 32rpx;
  font-weight: 500;
  padding: 0 10rpx;
  word-break: break-all;
  word-wrap: break-word;
}

.tui-cell-img {
  height: 160rpx;
  width: 160rpx;
}

.tui-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tui-mr {
  margin-right: 20rpx;
}

.tui-inline {
  display: inline-block;
}

.tui-flex-pic {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  background: #fff;
  padding: 0 120rpx;
}

.tui-flex-pic image {
  width: 32%;
  margin-bottom: 2%;
}

.tui-content {
  padding: 0rpx 30rpx 20rpx 120rpx;
  box-sizing: border-box;
  font-size: 34rpx;
  font-weight: 400;
  color: #333;
}

.tui-gray {
  color: #ccc;
}

.tui-pleft {
  padding-left: 120rpx;
}