[系统运维]Day2鸿蒙应用开发学习总结

1、let和var的异同

（1）不同之处

js块级作用域：

使用?var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

let 声明的变量只在 let 命令所在的代码块?{}?内有效，在?{}?之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

循环作用域：

使用var在循环体内定义的变量可以作用于循环体内外，而使用let在循环体内定义的变量只作用于循环体内。

（2）相似之处

在函数体内使用var和let关键字声明的变量有点类似，它们的作用域都是局部的，例如

// 使用 var
function myFunction() {
    var carName = "Volvo";   // 局部作用域
}

// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
}

都只在作用于函数体内。

在函数体外使用var和let关键字声明的变量也有点类似，它们的作用域都是全局的，例如：

// 使用 var
var x = 2;       // 全局作用域

// 使用 let
let x = 2;       // 全局作用域

注意：在JS中，let是在ES6新增加的新增的关键字，在ES6之前则没有该关键字，除了let之外，ES6还新增了另一个关键字const，其声明一个只读的常量，一旦声明，常量的值就不能改变。

2、根据滑动滑动方向跳转页面

首先在.hml文件的第一个div中添加onswipe属性

<div class="container" onswipe="toNextPage">
    <text class="title1">
       第二个训练报告页面
    </text>
</div>

?然后在.js文件中添加在onswipe属性中定义的函数toNextPage()

import router from '@system.router';

export default {
    data: {
    },

    toNextPage(e){
       switch(e.direction){
               case 'left':
               router.replace(
                   {
                       uri:"pages/index/index"
                   }
               );
               case 'down':
               router.replace(
                   {
                       uri:"pages/index/report1/report1"
                   }
               );
       }
},
}

e：形参

e.direction：判断滑动方向

switch：选择结构语句，当滑动方向为左时，跳转到主页面，当滑动方向为下时，跳转到第一个训练报告

这里还用到的一个知识点是页面路由router，需要导入router模块，如第一条代码所示，然后用uri指定要跳转的页面地址。

3、进度条

<progress class="progress-bar" percent="{{$item.percent}}" style="color: {{$item.color}};" />

percent表示进度条的百分比，color表示进度条的颜色

其中{{ }}用于动态赋值，$item用于循环赋值，如下如所示，在.js文件中添加一个字典，设percent和color为key值。

export default {
     data:{
        states:[
            {
               
               percent:0,
               color:'#ffa500'
            },
            {
               
                percent:0,
                color:'#ffff00'
            },
            {
                
                percent:0,
                color:'#00ffff',
            },
            {
               
                percent:0,
                color:'#0000ff'
            }
        ]
    },
    }

在list-item中添加for属性（list-item为list的一个子组件，list用于创建列表）

 <list class="state-wrapper" >
        <list-item class="state-item" for='{{states}}'>
            <progress class="progress-bar" percent="{{$item.percent}}" style="color: {{$item.color}};" />
        </list-item>
    </list>

运行后就可以创建出四个进度条，效果如图下所示：

注：这里的percent我随机给它赋值了。

?

?