标题点击可跳转网页

要实现点击标题跳转到网页的功能,你可以在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或小程序中进行页面跳转。

相关推荐
li35744 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj4 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel4 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel5 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵6 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld6 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷8 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军8 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离8 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库