标题点击可跳转网页

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

相关推荐
SUPER52662 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx182 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友4 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar4 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙7 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump7 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro8 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin8 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial