H5 中 van-popup 的使用以及题目的切换

H5 中 van-popup 的使用以及题目的切换

在移动端开发中,弹窗组件是一个常见的需求。vant 是一个轻量、可靠的移动端 Vue 组件库,其中的 van-popup 组件可以方便地实现弹窗效果。本文将介绍如何使用 van-popup 实现题目详情的弹窗展示,并实现题目的切换功能。

关键点总结

  1. 引入 van-popup 组件

    • 在 Vue 项目中引入 vant 组件库,并使用 van-popup 组件实现弹窗效果。
    • import { createApp } from 'vue'
      import Vant from 'vant'const app = createApp(App)
      app.use(Vant)
      app.mount('#app')
  2. 弹窗内容的条件渲染

    • 根据不同的题目类型(如互动题和练习题),在弹窗中显示不同的内容。
  3. 题目详情的展示

    • 使用 computed 属性计算当前题目的详情,并在弹窗中展示题目的相关信息。
  4. 题目的切换

    • 通过按钮实现题目的上一题和下一题的切换,并更新当前题目的索引。
代码示例

以下是实现上述功能的关键代码片段:

questions.vue---子组件

<template><van-popup v-model:show="localVisible" position="bottom" round :style="{ height: '80%' }" @close="close"><div v-if="type === 'interactive'"><div class="picker-header"><div class="picker-title">题目详情<button @click="close" class="close-button">X</button></div><div class="picker-info"><div class="left-info"><span class="number">第{{ currentQuestion.serial_number }}题</span><span class="status">{{ getStatusText(currentQuestion.status) }}</span></div><div class="right-info"><button v-if="!isFirstQuestion" @click="prevQuestion"><van-icon name="arrow-left" /></button><span>{{ currentQuestion.serial_number }}/{{ questions.length }}</span><button v-if="!isLastQuestion" @click="nextQuestion"><van-icon name="arrow" /></button></div></div></div><div class="picker-content"><div class="section-title">课件页面</div><iframe :src="currentQuestion.previewUrl" frameborder="0"></iframe><div class="use-duration">我的用时:<span class="time-number">{{ formattedDuration.minutes }}</span>分 <span class="time-number">{{formattedDuration.seconds }}</span>秒</div></div></div><div v-else-if="type === 'practice'">//  其他内容</div></van-popup>
</template><script setup>
import { defineProps, defineEmits, computed, ref, watch } from 'vue'
import { Popup } from 'vant'const props = defineProps({visible: Boolean,questions: {type: Array,required: true,},currentQuestionIndex: {type: Number,required: true,},type: {type: String,required: true,},
})const emits = defineEmits(['close', 'changeQuestion'])const localVisible = ref(props.visible)watch(() => props.visible,newVal => {localVisible.value = newVal},
)const currentQuestion = computed(() => {const question = props.questions[props.currentQuestionIndex] || {}if (props.type === 'practice' && !question.serial_number) {question.serial_number = props.currentQuestionIndex + 1}return question
})const getStatusText = status => {switch (status) {case 1:return '正确'case 2:return '错误'case 3:return '半对半错'default:return '未作答'}
}const formatDuration = duration => {const minutes = String(Math.floor(duration / 60)).padStart(2, '0')const seconds = String(duration % 60).padStart(2, '0')return { minutes, seconds }
}const formattedDuration = computed(() => formatDuration(currentQuestion.value.use_duration))const isFirstQuestion = computed(() => props.currentQuestionIndex === 0)
const isLastQuestion = computed(() => props.currentQuestionIndex === props.questions.length - 1)const prevQuestion = () => {if (!isFirstQuestion.value) {emits('changeQuestion', props.currentQuestionIndex - 1)}
}const nextQuestion = () => {if (!isLastQuestion.value) {emits('changeQuestion', props.currentQuestionIndex + 1)}
}const close = () => {emits('close')
}
</script><style lang="less" scoped>
.picker-header {padding: 10px;
}.picker-title {font-size: 18px;font-weight: bold;justify-content: space-between;align-items: center;margin-bottom: 10px;color: #000;margin-top: 10px;display: flex;width: 100%;.close-button {background: none;border: none;font-size: 16px;margin-left: auto;color: #a9aeb8;cursor: pointer;}
}.picker-info {display: flex;justify-content: space-between;align-items: center;padding: 0 10px 0 10px;
}.left-info {display: flex;flex-direction: row;.number {margin-right: 20px;font-size: 16px;font-weight: 500;}.status {font-size: 16px;font-weight: 500;color: #1f70ff;}
}.right-info {display: flex;position: absolute;right: 10px;color: #a9aeb8;.right-icon {width: 28px;height: 28px;}
}.right-info button {background: none;border: none;font-size: 16px;cursor: pointer;margin: 0 5px;
}.picker-content {padding: 10px 20px 0 20px;
}.section-title {font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #2b2f38;
}iframe {width: 100%;height: 300px;border: none;margin-bottom: 10px;
}.use-duration {font-size: 16px;color: #2b2f38;
}.time-number {font-weight: bold;color: #0074fc;font-size: 24px;
}.van-popup {height: 50%;z-index: 99999;
}.practice-content {padding: 0px 20px 0 20px;
}
</style>

courseDetail.vue---父组件

// template关键代码
<div v-for="(item, index) in period.interactive_performance.list" :key="index" :class="['performance-item',getStatusClass(item.status),{ selected: selectedQuestion === index },]" @click="selectQuestion(index, period.interactive_performance.list, 'interactive')"><span :class="getQuestionTextClass(item.status, selectedQuestion === index)">{{item.serial_number}}</span></div><div v-for="(item, index) in period.practice_detail.list" :key="index" :class="['practice-item',getStatusClass(item.status),{ selected: selectedPracticeQuestion === index },]" @click="selectPracticeQuestion(index, period.practice_detail.list, 'practice')"><div class="question-number"><span>{{ index + 1 }}</span></div>
</div><QuestionDetail :visible="showQuestionDetail" :questions="currentQuestions" :type="currentType":currentQuestionIndex="currentQuestionIndex" @close="closeQuestionDetail" @changeQuestion="changeQuestion" />// script关键代码
const selectQuestion = (index, questions, type) => {selectedQuestion.value = indexcurrentQuestions.value = questionscurrentType.value = typecurrentQuestionIndex.value = indexshowQuestionDetail.value = true
}const selectPracticeQuestion = (index, questions, type) => {selectedPracticeQuestion.value = indexcurrentQuestions.value = questionscurrentQuestionIndex.value = index// 设置 serial_number 属性currentQuestions.value.forEach((question, idx) => {question.serial_number = idx + 1})currentType.value = typeshowQuestionDetail.value = true
}
const changeQuestion = index => {currentQuestionIndex.value = index
}

数据结构

关键点解析
  1. 引入 van-popup 组件

    • 在模板中使用 <van-popup> 标签,并通过 v-model:show 绑定弹窗的显示状态。
    • 设置 position="bottom" 和 round 属性,使弹窗从底部弹出并带有圆角。
  2. 弹窗内容的条件渲染

    • 使用 v-if 和 v-else-if 根据 type 属性的值渲染不同的内容。
    • 当 type 为 interactive 时,显示互动题的详情;当 type 为 practice 时,显示练习题的详情。
  3. 题目详情的展示

    • 使用 computed 属性计算当前题目的详情,并在弹窗中展示题目的相关信息。
    • 通过 currentQuestion 计算属性获取当前题目的详细信息。
  4. 题目的切换

    • 通过按钮实现题目的上一题和下一题的切换,并更新当前题目的索引。
    • 使用 isFirstQuestion 和 isLastQuestion 计算属性判断当前题目是否为第一题或最后一题,以控制按钮的显示和隐藏。

大致效果

通过以上关键点的实现,我们可以在移动端应用中使用 van-popup 组件实现题目详情的弹窗展示,并实现题目的切换功能。希望本文对您有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/491959.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Metaploit-永恒之蓝漏洞利用

1&#xff1a;Metaploit介绍   本次测试主要是利用永恒之蓝漏洞对windows7进行控制利用&#xff0c;掌握Metaploit工具的使用&#xff0c;知道永恒之蓝的漏洞利用原理。永恒之蓝是在Windows的SMB服务处理SMB v1请求时发生的漏洞&#xff0c;这个漏洞导致攻击者在目标系统上可…

FPGA高速下载器SZ901

SZ901基于AMD(Xilinx) Virtual Cable协议. 本设备使用千兆网络接口。基于此接口,本设备可以同时支持多达四路FPGA板卡同时调试,每组相互独立,互不干扰。 特点 1,支持JTAG 速度最高53Mb/s&#xff0c;电压范围1.2-3.3V,最高支持200cm排线 2,支持4路JTAG独立使用 3,支持多路…

【递归,搜索与回溯算法】穷举 vs 暴搜 vs 深搜 vs 回溯 vs 剪枝算法入门专题详解

前言 什么是回溯算法&#xff1f; 回溯算法是一种经典的递归算法&#xff0c;通常用于解决组合问题、排列问题和搜索问题等。 回溯算法的基本思想 从一个初始状态开始&#xff0c;按照一定的规则向前搜索&#xff0c;当搜索到某个状态无法前进时&#xff0c;回退…

设计模式之桥接模式:抽象与实现之间的分离艺术

~犬&#x1f4f0;余~ “我欲贱而贵&#xff0c;愚而智&#xff0c;贫而富&#xff0c;可乎&#xff1f; 曰&#xff1a;其唯学乎” 桥接模式概述与角色组成 想象一下你家里的电视遥控器&#xff0c;无论是索尼还是三星的电视机&#xff0c;遥控器的按键功能都差不多&#xff1…

ASRPRO学习笔记一之语音模型位置和语音替换

一、语音替换的步骤 1、扬声器录音 打开GoldWave,点击工具栏中的蓝色控制属性按钮&#xff0c;点击设备&#xff0c;选择扬声器&#xff0c;点击ok。打开电脑上的网易云音乐&#xff0c;点击红色的录制按钮&#xff0c;开始录制音乐&#xff0c;在网易云音乐上点击播放音乐,录…

多因子认证 (Multi-factor authentication, MFA)

多因子认证 (MFA) 是一种思想&#xff0c;而UsernamePassword&#xff0c;OTP等是具体的认证手段。多因子认证就是将这些认证手段结合。 目录 什么是MFAMFA的作用MFA的实际应用 认证认证 (Authentication, AuthN) 因素常见的认证 (Authentication, AuthN) 类型密码认证无密码认…

内存压缩禁用设置

设置禁用内存压缩功能 1、“Win”“X”键→“A”键 2、如果输入“Get-MMAgent”并按“Enter”键&#xff0c;则可以从“MemoryCompression”中检查内存压缩功能的状态。 True启用&#xff0c;False禁用 3、要禁用内存压缩功能&#xff0c;请输入“Disable-MMAgent -mc”并…

素数回文数的个数

素数回文数的个数 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 求11到n之间&#xff08;包括n&#xff09;&#xff0c;既是素数又是回文数的整数有多少个。 输入 一个大于11小于1000的整数n。 输出…

QT网络(一):主机信息查询

网络简介 在QT中进行网络通信可以使用QT提供的Qt Network模块&#xff0c;该模块提供了用于编写TCP/IP网络应用程序的各种类&#xff0c;如用于TCP通信的QTcpSocket和 QTcpServer&#xff0c;用于 UDP 通信的 QUdpSocket&#xff0c;还有用于网络承载管理的类&#xff0c;以及…

Flutter Navigator2.0的原理和Web端实践

01 背景与动机 在Navigator 2.0推出之前&#xff0c;Flutter主要通过Navigator 1.0和其提供的 API&#xff08;如push(), pop(), pushNamed()等&#xff09;来管理页面路由。然而&#xff0c;Navigator 1.0存在一些局限性&#xff0c;如难以实现复杂的页面操作&#xff08;如移…

如何在谷歌浏览器中开启安全浏览

在数字化时代&#xff0c;网络安全变得愈发重要。作为全球最受欢迎的网络浏览器之一&#xff0c;谷歌浏览器提供了多种功能来保护用户的在线安全。本文将详细介绍如何在谷歌浏览器中开启安全浏览&#xff0c;并额外提供一些有用的页面滚动设置、地址栏快捷搜索和跟踪防护的相关…

【物联网技术与应用】实验3:七彩LED灯闪烁

实验3 七彩LED灯闪烁 【实验介绍】 七彩LED灯上电后&#xff0c;7色动闪光LED模块可自动闪烁内置颜色。它可以用来制作相当吸引人的灯光效果。 【实验组件】 ● Arduino Uno主板* 1 ● USB数据线* 1 ● 7彩LED模块*1 ● 面包板*1 ● 9V方型电池*1 ● 跳线若干 【实验原…

直播美颜插件开发全流程:从美颜sdk的集成到实际部署

对于开发者来说&#xff0c;如何高效地开发和部署一个直播美颜插件&#xff0c;则需要从美颜SDK的集成到实际部署的全流程把控。本篇文章&#xff0c;我将详细解析这个流程中的关键技术和核心环节&#xff0c;助力开发者高效完成项目交付。 一、项目需求分析与技术选型 在开发…

【物联网技术与应用】实验4:继电器实验

实验4 继电器实验 【实验介绍】 继电器是一种用于响应施加的输入信号而在两个或多个点或设备之间提供连接的设备。换句话说&#xff0c;继电器提供了控制器和设备之间的隔离&#xff0c;因为设备可以在AC和DC上工作。但是&#xff0c;他们从微控制器接收信号&#xff0c;因此…

ESP32-S3外接SSD1306 OLED显示8*8字符和16*16汉字

一、接线图 二、实物 三、代码 #include <stdio.h> #include <string.h> #include "unity.h" #include "driver/i2c_master.h" #include "driver/gpio.h" #include "esp_lcd_panel_io.h" #include "esp_lcd_pane…

【Qt】QWidget中的常见属性及其功能(二)

目录 六、windowOpacity 例子&#xff1a; 七、cursor 例子&#xff1a; 八、font 九、toolTip 例子&#xff1a; 十、focusPolicy 例子&#xff1a; 十一、styleSheet 计算机中的颜色表示 例子&#xff1a; 六、windowOpacity opacity是不透明度的意思。 用于设…

Nginx Proxy Manager如何管理与配置反向代理服务并实现远程访问

文章目录 前言1. 一键安装2. 本地访问3. Linux 安装cpolar4. 配置公网访问地址5. 公网远程访问6. 固定公网地址 前言 Nginx Proxy Manager 是一个开源的反向代理工具&#xff0c;不需要了解太多 Nginx 或 Letsencrypt 的相关知识&#xff0c;即可快速将你的服务暴露到外部环境…

vscode中同时运行两个python文件(不用安装插件)

如何在vscode中同时运行两个python文件呢&#xff1f;今天在工作中遇到了这个问题。 查了网上的方法是安装coder runner插件&#xff0c;后来发现自身就有这个功能。所以记录一下,方便后续查找: 这是我的第一个文件&#xff0c;点击右上角的运行旁边的小箭头&#xff0c;有一…

Visio——导出的PDF文件缺乏嵌入字体的解决办法 / 设置导出的PDF文件添加嵌入字体的方法

导出PDF时&#xff0c;勾选 “符合PDF/A” 选项 这样就导出的PDF文件添加了嵌入字体了。

皮肤伤口分割数据集labelme格式248张5类别

数据集格式&#xff1a;labelme格式(不包含mask文件&#xff0c;仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)&#xff1a;284 标注数量(json文件个数)&#xff1a;284 标注类别数&#xff1a;5 标注类别名称:["bruises","burns","cu…