css实现固定区域的上下滑动(vue基础实践案例)

最新推荐文章于 2024-07-13 09:58:00 发布

子月吾生

最新推荐文章于 2024-07-13 09:58:00 发布

阅读量3.3k

点赞数

分类专栏： Vue 实践案列文章标签： vue v-for v-if overflow 单选按钮和多选按钮

本文链接：https://blog.csdn.net/Sunday97/article/details/107986372

版权

本文介绍如何使用CSS实现固定区域的上下滑动，通过设置overflow-y: scroll属性来实现。同时，结合Vue.js，展示了如何运用v-for循环遍历JSON数组，创建单选按钮和多选按钮，并利用v-if属性控制元素的显示与隐藏。文章提供了一个简单的Vue案例代码，用于演示这些概念。

摘要由CSDN通过智能技术生成

css实现固定区域的上下滑动

在这里插入图片描述

实现原理：分为两个部分：需要滑动的区域部分（命名inter）和inter的父容器（命名outer）；让inter的高度超过outer,给outer设置 overflow-y: scroll属性
分别添加css属性如下：

 .outer {
   
            height: 450px;
            overflow-y: scroll;
        }
 .inter {
   
            height: 950px;
            width: 100%;
        }

就可以实现滑动了。

下面是vue的一个案列，里面包含的知识点有：

v-for循环（案例中直接循环一个json数组，将每道题展示出来）
单选按钮和多选按钮：比如单选的时候如果不给单选框添加name属性，就还是多选，解决办法就是给同一道题下的单选按钮添加相同的name属性值。
如果想实现点击选择按钮后面的文本时也可以进行选择，就要用到lable标签，将lable标签的for属性和选择按钮标签的id属性写上同样的值就可以了。
v-if属性（是否要去展示一个标签）：它是直接从页面中删除或者添加某个元素

完整的案列代码展示如下，可以直接复制过去看效果（很简单的一个单页面）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        #wrapper{
   
            border: 1px solid black;
            background-color: antiquewhite;
            width:300px;
        }
        .fixed{
   
            text-align:center;
            color:blue;
            margin:20px;
            background-color:darkgray;
        }
        .outer {
   
            height: 450px;
            overflow-y