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

最新推荐文章于 2024-04-20 09:57:51 发布

小芹儿

最新推荐文章于 2024-04-20 09:57:51 发布

阅读量1.6k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/xu_ze_qin/article/details/107104135

版权

本文介绍如何在微信小程序中使用card组件创建美观的展示卡片，并详细讲解了结合JSON配置及JavaScript实现卡片点击后的页面跳转，包括获取卡片的index值以实现不同卡片对应不同页面的跳转功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述
页面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: