鸿蒙实训第二天

鸿蒙实训第二天

上午
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 <= 20; i++) {
            this.arrdatas.push("第" + i + "项");
        }
    },
    delall() {
        this.arrdatas = [];
    },
    add() {

        let rv = parseInt(Math.random() * 11);
        console.log("随机数是:" + rv);
        console.log(typeof rv);

        this.arrdatas.push("随机数项为:" + rv + "项");

    },
    delitem(index) {
        console.log("点击删除的项的索引就是下标:" + index);

        //会弹出对话框
        prompt.showDialog({
            title: "操作提示",
            message: "你确定删除这条数据吗?",
            buttons: [{
                          "text": "确认", "color": "#000000"
                      },
                      {
                          "text": "取消", "color": "#000000"
                      }],
            success: (event) => {
                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}}
            
        
    
    {flag}}">
        {{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<50 ;i++)
        {
            this.arrdatas.push("第"+i+"项");
        }

        this.listdata =  this.arrdatas.slice(0,this.currentpage*PAGE_NUM);
        console.log(this.listdata);
        console.log(this.arrdatas);

    },
    loadmore()
    {
        this.currentpage ++;
        prompt.showToast({
            message:"加载的是:第"+this.currentpage+"页数据"
        });

        console.log(this.arrdatas.length);

        let  maxSize =  this.arrdatas.length%PAGE_NUM == 0 ?
            this.arrdatas.length/PAGE_NUM:parseInt(this.arrdatas.length/PAGE_NUM)+1;
        console.log("总共页数:"+maxSize + "页")

        if(this.currentpage > maxSize)
        {
            prompt.showToast({
                message:"数据已经加载完毕"
            });
            this.loadtext= '数据加载完毕,见底了';
            this.flag =true;
        }
        else
        {
            this.listdata =  this.arrdatas.slice(0,this.currentpage*PAGE_NUM);
        }
    }
}