标题点击可跳转网页

要实现点击标题跳转到网页的功能，你可以在Vue组件中使用<a>标签（锚点标签）并设置href属性为网页的URL。如果你希望使用uni-app的特性来控制页面跳转，可以使用uni.navigateTo方法（这适用于uni-app环境，如微信小程序、App等）。

以下是两种实现方式的示例：

使用HTML锚点标签跳转

html

<template>
  <view class="news-list">
    <!-- 新闻列表 -->
    <view class="news-item" v-for="(news, index) in newsList" :key="index">
      <!-- 使用a标签包裹标题，点击时跳转到网页 -->
      <a :href="news.url" target="_blank" class="news-title">{{ news.title }}</a>
      <view class="news-author">作者：{{ news.author }}</view>
      <!-- 新闻视频 -->
      <view class="news-video">
        <video :src="news.videoUrl" controls></video>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 假设的新闻数据
const newsList = ref([
  {
    title: '新闻1',
    author: '石平',
    videoUrl: 'https://www.example.com/video1.mp4', // 视频链接
    url: 'https://www.example.com/news1' // 新闻详情页链接
  },
  {
    title: '新闻2',
    author: '石平',
    videoUrl: 'https://www.example.com/video2.mp4', // 视频链接
    url: 'https://www.example.com/news2' // 新闻详情页链接
  },
  // 更多新闻...
]);
</script>

<style>
/* 样式 */
</style>

在这个示例中，<a>标签的href属性被设置为新闻项的url属性，这样点击标题时就会打开一个新的浏览器标签页并跳转到指定的URL。

使用uni-app的uni.navigateTo方法跳转

如果你的应用是在一个App或小程序环境中运行，你可能希望使用uni-app的页面导航方法来控制页面跳转：

html

<template>
  <view class="news-list">
    <!-- 新闻列表 -->
    <view class="news-item" v-for="(news, index) in newsList" :key="index">
      <!-- 使用点击事件绑定跳转方法 -->
      <view @click="navigateToNews(news.url)" class="news-title">{{ news.title }}</view>
      <view class="news-author">作者：{{ news.author }}</view>
      <!-- 新闻视频 -->
      <view class="news-video">
        <video :src="news.videoUrl" controls></video>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 假设的新闻数据
const newsList = ref([
  {
    title: '新闻1',
    author: '石平',
    videoUrl: 'https://www.example.com/video1.mp4', // 视频链接
    url: 'https://www.example.com/news1' // 新闻详情页链接
  },
  {
    title: '新闻2',
    author: '石平',
    videoUrl: 'https://www.example.com/video2.mp4', // 视频链接
    url: 'https://www.example.com/news2' // 新闻详情页链接
  },
  // 更多新闻...
]);

// 导航到新闻详情页的方法
const navigateToNews = (url) => {
  uni.navigateTo({
    url: url
  });
};
</script>

<style>
/* 样式 */
</style>

在这个示例中，点击标题时会触发navigateToNews方法，该方法使用uni.navigateTo来跳转到指定的URL。这种方法适用于uni-app环境，允许你在App或小程序中进行页面跳转。