当前位置: 首页 > news >正文

标题点击可跳转网页

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

http://www.lryc.cn/news/476317.html

相关文章:

  • 易语言模拟真人动态生成鼠标滑动路径
  • Linux:生态与软件安装
  • R 语言与其他编程语言的区别
  • RC低通滤波器Bode图分析(传递函数零极点)
  • 基于深度学习的网络入侵检测
  • 《构建一个具备从后端数据库获取数据并再前端显示的内容页面:前后端实现解析》
  • Rust 力扣 - 59. 螺旋矩阵 II
  • 2.4w字 —TS入门教程
  • java: 未结束的字符文字 报错及解决:将编码全部改为UTF-8或者GBK
  • Android平台RTSP转RTMP推送之采集麦克风音频转发
  • 认证鉴权框架之—sa-token
  • Spring源码(十一):Spring MVC之DispatchServlet
  • gitbash简单操作
  • pnpm install安装element-plus的版本跟package.json指定的版本不一样
  • Java线程池的核心内容详解
  • 学习笔记——三小时玩转JQuery
  • word试题转excel(最简单的办法,无格式要求)
  • 基于web的中小学成绩管理系统的设计与实现
  • Conmi的正确答案——在Kibana中进入Elasticsearch的索引管理页面
  • 【JavaEE】【多线程】进阶知识
  • LeetCode100之三数之和(15)--Java
  • 并发编程三大特性--可见性和有序性
  • Android 使用ninja加速编译的方法
  • 《Java 实现选择排序:原理剖析与代码详解》
  • 数据结构之双链表——考研笔记
  • Django视图写法
  • 单臂路由实现不同VLAN之间设备通信
  • Linux·进程控制(system V)
  • 华为云Stack名词解释
  • YoloV9改进策略:上采样改进|CARAFE,轻量级上采样|即插即用|附改进方法+代码