微信小程序点击卡片跳转到对应详情

效果图

源代码

//不会的点：不知道怎么获取后端返回的链接地址值，动态的跳转到不同详情内容
//解决方案：在方法里面加参数（这就是带参数的意义）

x-activity-card.vue

<template>
  <view class="notice-box">
    <!-- 通知公告 -->
    <view
      class="parkNotice-card"
      v-for="(item, index) in listData"
      :key="index"
      @click="jumpAddress(item)"
    >
      <view class="title">
        <view class="img">
          <image
            :src="
              item.noticeType === '1'
                ? localImg.park.announcementIcon
                : localImg.park.policyIcon
            "
          ></image>
        </view>
        <view class="text">{{ item.noticeTitle }}</view>
      </view>
      <view class="subTitle">
        <span class="tag">
          <span v-if="item.noticeType === '1'">通知公告</span>
          <span v-if="item.noticeType === '2'">政策速递</span>
        </span>
        <span class="date">{{ dateFormat(item.pubdate) }}</span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "x-notice-card",
  props: ["listData"],
  data() {
    return {
      localImg: {},
    };
  },
  onload() {
    //在这里写，子组件不会出来图片
  },
  mounted() {
     this.localImg = this.LocalImg;
  },
  methods: {
    //时间转换
    dateFormat(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      // return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      return year + "-" + month + "-" + day;
    },
    
    //跳转公众号
    jumpAddress(item) {
      var url = item.linkAddress;//这个就是后端返回的链接地址
      var titleName = item.noticeTitle;
      uni.navigateTo({
        url: "../linkAccount/linkAccount?url=" + url + "&title=" + titleName,
      });
    },
  },
};
</script>

举一反三

之前还做过就是点击卡片，后端它会有详情内容的接口，就是每一个卡片会提供一个id