1、用HBuildX创建vue3项目

2、编辑页面

引入swipet组件，设置高度为100vh，整个屏幕都是swiper滑动窗口

<template><view class="content"><swiper><swiper-item><view class="swiper-item">1</view></swiper-item></swiper></view>
</template>
<style lang="less">
swiper{background-color: pink;height: 100vh;
}
</style>

3、模拟题目

<script setup>import {reactive} from 'vue'let data=reactive({list: [{"question": "对未取得驾驶证驾驶机动车的，追究其法律责任。","option1": null,"option2": null,"option3": null,"option4": null,"answer": "对","explain": "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。","pic": null,"type": "C1,C2,C3","chapter": "驾驶证和机动车管理规定"},{"question": "驾驶机动车应当随身携带哪种证件？","option1": "A、工作证","option2": "B、驾驶证","option3": "C、身份证","option4": "D、职业资格证","answer": "B","explain": "《道路交通安全法》规定，驾驶人应当按照驾驶证载明的准驾车型驾驶机动车；驾驶机动车时，应当随身携带机动车驾驶证。","pic": null,"type": "C1,C2,C3","chapter": "驾驶证和机动车管理规定"},]})
</script>

4、完整代码

<template><swiper :current="data.current" @change="changeSwiper"><swiper-item v-for="item in data.list" :key="index"><view class="swiper-item"><!-- 题目 --><div>{{item.question}}</div><!-- 选项 --><div @click="judge"><!-- 选择题 --><div v-if="item.option1!=null"><button data-index="A">A</button><button data-index="B">B</button><button data-index="C">C</button><button data-index="D">D</button></div><!-- 判断题 --><div v-else><button data-index="对">对</button><button data-index="错">错</button></div></div></view></swiper-item></swiper>
</template><script setup>import {reactive} from 'vue'let data=reactive({list: [{"question": "对未取得驾驶证驾驶机动车的，追究其法律责任。","option1": null,"option2": null,"option3": null,"option4": null,"answer": "对","explain": "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。","pic": null,"type": "C1,C2,C3","chapter": "驾驶证和机动车管理规定"},{"question": "驾驶机动车应当随身携带哪种证件？","option1": "A、工作证","option2": "B、驾驶证","option3": "C、身份证","option4": "D、职业资格证","answer": "B","explain": "《道路交通安全法》规定，驾驶人应当按照驾驶证载明的准驾车型驾驶机动车；驾驶机动车时，应当随身携带机动车驾驶证。","pic": null,"type": "C1,C2,C3","chapter": "驾驶证和机动车管理规定"},],current:0})const judge=(e)=>{// 获取点击的选项let {index}=e.target.datasetif(index==data.list[data.current].answer){console.log('回答正确');}else{console.log('回答错误');}}const changeSwiper=(e)=>{// 获取swiper的索引data.current=e.detail.current}
</script><style scoped lang="less">swiper{height: 100vh;background-color: pink;}
</style>

5、实现原理

5、1用事件委派来获取用户点击的选项，不需要在每个button添加@click事件

5、2使用swiper的detail.current获取每个swiper-item项的索引，实现答案判断

5、3在judge回答正确（错误）后可以自行实现功能

如：回答正确swiper滑动下一项

回答错误将当前题目加入错题集，显示解析等等

uniapp实现滑动答题相关推荐

uni-app小程序答题功能开发(左右滑动,判断,填空,问答,答题卡,纠错,做题倒计时等)
1,最近再搞一个关于答题的小程序,刚开始是点击切换题目,后来改成左右切换的,搞得脑袋有点大,用swiper 搞了半天还是有bug,无奈之下只能去百度了,找到了一个模板,稍微改变了一点,记录下来里面引 ...
uni-app 上下滑动左右滑动
<template><view><view class="uni-padding-wrap uni-common-mt"><view cl ...
uniapp可滑动的顶部导航
1.刚开始接触uniapp的时候一直纠接这个导航栏滑动的问题.今天抽空把有用的部分提拉出来.做个小笔记. <template><view class="container& ...
uni-app 小说滑动阅读功能实现
小说项目增添了内容左右滑动需求,于是用了 uni-app 内置的 swiper 来做左右滑动 HTML代码: <view class="content-text" id=&q ...
uniapp横向滑动完整代码
效果:横向滑动 <template><view class="content"><scroll-view scroll-x="true&qu ...
uni-app使用滑动视图容器实现图片轮播【swiper】
一.简介 swiper:滑块视图容器,就是我们常用的轮播图. swiper-item:仅可放置在组件中,宽高自动设置为100%,唯一属性item-id,String类型,表示该 swiper-ite ...
uniapp 顶部滑动状态栏加背景色
<view :style="{ height: iStatusBarHeight + 'px'}" class="stat" v-show="i ...
uniapp手写_【转】uni-app框架纯手写微信小程序开发左侧滑动菜单
本帖最后由 fengrui99 于 2020-7-22 14:38 编辑原文来自:在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香) 在大佬的指引 ...
uniapp 简单有效判断手指滑动方向
@touchstart="touchStart"@touchend="touchEnd"@touchmove='move' 首先是在uniapp中运用这三个方 ...

uniapp实现滑动答题

1、用HBuildX创建vue3项目

2、编辑页面

3、模拟题目

4、完整代码

5、实现原理

uniapp实现滑动答题相关推荐

最新文章

热门文章

uniapp实现滑动答题

1、用HBuildX创建vue3项目

2、 编辑页面

3、模拟题目

4、完整代码

5、实现原理

uniapp实现滑动答题相关推荐

最新文章

热门文章

2、编辑页面