标题点击可跳转网页

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

相关推荐
小菜花29几秒前
利用H5实现svg图片中各部分监听事件
前端·javascript·svg·object标签
二十雨辰1 小时前
歌词滚动效果
前端·css
法医1 小时前
和文心快码做朋友,让编程像“说话”一样简单
前端·文心快码
前端小巷子1 小时前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
陈随易1 小时前
适合中国宝宝的AI编程神器,文心快码
前端·后端·node.js
知识分享小能手1 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
UrbanJazzerati1 小时前
掌握 DOM 的基础属性与方法:从操作元素到构建动态效果
前端·面试
hashiqimiya2 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
古夕2 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
纯真时光2 小时前
Vue3中pinia状态管理库的使用(Composition API 风格)
前端