标题点击可跳转网页

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

相关推荐
1024小神6 分钟前
uniapp+vue3+vite+ts+xr-frame实现ar+vr渲染踩坑记
前端
测试界清流8 分钟前
基于pytest的接口测试
前端·servlet
知识分享小能手31 分钟前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
trsoliu1 小时前
多仓库 Workspace 协作机制完整方案
前端
啦工作呢1 小时前
数据可视化 ECharts
前端·信息可视化·echarts
NoneSL1 小时前
Uniapp UTS插件开发实战:引入第三方SDK
前端·uni-app
trsoliu1 小时前
Claude Code Templates
前端·人工智能
wangpq1 小时前
使用rerender-spa-plugin在构建时预渲染静态HTML文件优化SEO
前端·javascript·vue.js
KongHen1 小时前
完美解决请求跨域问题
前端
前端开发爱好者1 小时前
弃用 uni-app!Vue3 的原生 App 开发框架来了!
前端·javascript·vue.js