页面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; }