MVVM 模式进度条与滚动条

最新推荐文章于 2024-08-16 09:52:45 发布

穿越的马里奥

最新推荐文章于 2024-08-16 09:52:45 发布

阅读量921

点赞数

分类专栏：前端设计模式文章标签： MVVM js特效

本文链接：https://blog.csdn.net/qq_37644845/article/details/84857611

版权

本文介绍了MVVM模式，并提供了一段基于JavaScript的代码示例，展示了如何在MVVM模式下实现进度条和滚动条的交互效果。通过绑定数据和视图模型，实现了模型和视图的同步更新。

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

MVVM模式进度条与滚动条

1、MVVM模式介绍
2、代码
3、效果图

1、MVVM模式介绍

MVVM 模式，模型 (Model) -视图 (View) -视图模型 (ViewModel) : 为视图层 (View)量身定做一套视图模型 (ViewModel)，并在视图模型 (ViewModel) 中创建属性和方法，为书图层 (View) 绑定数据 (Model) 并实现交互。

2、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .first,.second,.third{
    
            border: 1px solid #333;
            border-radius: 5px;
            height: 35px;
            margin: 55px 50px 15px 50px;
            width: 500px;
        }
        .second{
    
            top:60px;
        }
        .third{
    
            top:110px;
        }
        .ui-slider,.ui-progressbar{
     
            position: relative;
            box-sizing: border-box;
            border: 2px solid #000;
        }
        .ui-slider>span,.ui-slider>em{
    
            position:absolute;
        }
        .ui-slider>em{
    
            top:-30px;
        }
        .ui-slider>span{
    
            box-sizing: border-box;
            top:-20%;
            width: 16px;
            height: 140%;
            border: 2px solid #000;
            border-radius: 6px;
            background-color: rgba(139,69,19,0.6);
            cursor: pointer;
        }
        .ui-slider>b{
    
            position: absolute;
            left:calc(100% + 20px);
            top:calc(50% - 10px);;
        }
        .ui-slider>div{
    
            height: 100%;