So implementieren Sie Nachrichteninformationen und empfohlene Lektüre in uniapp

<template>
  <view class="news-list">
    <ul>
      <li v-for="(item, index) in newsList" :key="index" @click="goToDetail(item.id)">
        <view class="news-item">
          <image :src="item.image"></image>
          <view class="news-info">
            <text class="news-title">{{ item.title }}</text>
            <text class="news-time">{{ item.time }}</text>
          </view>
        </view>
      </li>
    </ul>
  </view>
</template>

<template>
  ...
</template>

<script>
export default {
  data() {
    return {
      newsList: [] // 新闻列表数据
    }
  },
  mounted() {
    // 获取新闻数据
    this.getNewsList()
  },
  methods: {
    getNewsList() {
      // 发送请求获取新闻列表数据
      // 将获取到的数据赋值给this.newsList
    },
    goToDetail(id) {
      // 跳转到新闻详情页面
      uni.navigateTo({
        url: `/pages/news/detail?id=${id}`
      })
    }
  }
}
</script>

<template>
  <view class="recommend-list">
    <view class="recommend-item" v-for="(item, index) in recommendList" :key="index" @click="goToDetail(item.id)">
      <image :src="item.image"></image>
      <text>{{ item.title }}</text>
    </view>
  </view>
</template>

<template>
  ...
</template>

<script>
export default {
  data() {
    return {
      recommendList: [] // 推荐列表数据
    }
  },
  mounted() {
    // 获取推荐列表数据
    this.getRecommendList()
  },
  methods: {
    getRecommendList() {
      // 根据推荐算法获取推荐列表数据
      // 将获取到的数据赋值给this.recommendList
    },
    goToDetail(id) {
      // 跳转到新闻详情页面
      uni.navigateTo({
        url: `/pages/news/detail?id=${id}`
      })
    }
  }
}
</script>