鸿蒙实训第二天

文档中心

鸿蒙实训第二天

上午
1.横向滚动页面视图
知识点：js中的数组是用[ ]表示

two.js

export default {    data: { arrs:[]    },    onInit(){ for(let i = 0;i <= 100;i++){     this.arrs.push("第"+i+"项"); }    }}

two.hml

            {{$item}}

two.css

.container {    display: flex;    width: 100%;    height: 100%;    background-color: powderblue;}.topview{    display: flex;    height: 40%;    border-bottom: 10vp solid peru;    overflow: scroll;    justify-content: center;    align-items: center;}.hboxview{    width: 30%;    height: 20%;    border: 2vp solid black;    display: flex;    justify-content: center;    align-items: center;    margin: 20vp;}

页面实现：

在这里插入图片描述

问题解决：在华为的官方文档里给的说明是scroll当前只支持纵向

在这里插入图片描述
通过实践发现，嵌入一个盒子，在topview下写overflow依然可以实现局部页面横向滚动。

2.轮播组件的使用
知识点：
·swiper轮播
·图片的插入使用
·下标使用{{&idx}}，对比小程序使用index
·string.json中“value”下可设置页面标题

标题的设置
在这里插入图片描述

页面实现：

下午
1.数据的增删改查
知识点：
·删除所有数据，只需要把数组重新赋值为空
·视图驱动视图变化 MVVM ，MVC
·随机数据的添加使用Math.random（）
·js查看数据类型的关键字是：typeof
· console.log(1 + true); //2
console.log(i == “1”); // == 比较的值
console.log(i === “1”); // === 比较的值和类型
·提示框组建的导入
import prompt from ‘@system.prompt’;
·JSON.stringify（）把Object转换成字符串类型

import prompt from '@system.prompt';export default {    data: { arrdatas: []    },    onInit() { for (let i = 0;i  {  console.log(event);  console.log(typeof event);  console.log(JSON.stringify(event)); //把object转换成字符串类型  if (event.index == 0) {      // 从数组中删除第几项，数量      this.arrdatas.splice(index, 1);  }  if (event.index == 1) {      //提示框      prompt.showToast({   message: "你取消了删除操作",   duration: 6000      });  }     } });    }}

     增加
 全部删除
    
            {{$item}}

3.分页的实现
知识点：
·使用javascript原生API 方法：Slice（startnum，endnum）

            {{$item}}     
     
     {{loadtext}}

import prompt from '@system.prompt';const  PAGE_NUM = 10;export default {    data: { arrdatas:[], listdata:[] , currentpage:1, loadtext:"加载更多", flag:false    },    onInit()    { for(let  i =0 ;i maxSize) {     prompt.showToast({  message:"数据已经加载完毕"     });     this.loadtext= '数据加载完毕,见底了';     this.flag =true; } else {     this.listdata =  this.arrdatas.slice(0,this.currentpage*PAGE_NUM); }    }}

松山湖网站

鸿蒙实训第二天