鸿蒙开发学习-Day2

---

前言

今天对昨天的作业——横向滚动视图进行了讲解，做了一个轮播图的练习，之后学习了鸿蒙js的增删改查和分页。

---

提示：以下是本篇文章正文内容

一、overflow横向滚动视图

昨晚练习的时候发现怎么都不能把overflow:scroll从纵向改成横向，于是查了一下，发现文档里说暂时只支持纵向：

但通过后来的调整发现overflow:scroll也可以实现横向滚动，只需要在block的外面加一层div，在外层使用overflow:scroll样式就可以了，见代码：
hml：

<div class="container">
    <div class="topview">
        <block for="{{arrs}}">
            <div class="boxview">
                <text>{{$item}}</text>
            </div>
        </block>
    </div>

</div>

css:

.container {
    display: flex;
    width: 100%;

    height: 100%;

    
}

.boxview{
    width: 30%;
    height: 20%;
/*    width: 12%;*/
/*    height: 100%;*/
    border: 2vp solid black;
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 20vp;
}
.topview{
    display: flex;
    height: 40%;
    overflow: scroll;
    border-bottom: 10vp solid black;
    justify-content: center;
    align-content: center;
}

js:

export default {
    data: {
        arrs:[]
    },
    onInit()   //onInit  页面初始化完成
    {
        //arrs放100个字符串类型的数据
        //  var 和  let 区别
        //  javascript  是个弱类型语言 java  是个强类型语言
        for(let i = 0 ; i<=10;i++)
        {
            //数组放入数据 第+i+项
            this.arrs.push("第"+i+"项");
        }
    }
}

效果如图：

二、轮播图练习

代码如下：

hml：

<div class="container">
    <div class="topview">
        <swiper class="swiperview" autoplay="true" indicator="true">
            <block for="{{swiperdatas}}">
                <div class="box">
                    <image src="{{$item}}"></image>
                </div>
            </block>
        </swiper>
    </div>
    <div class="twoview">
        <block for="{{imagedatas}}">
            <div class="hbox">
                <image class="imgview" src="{{$item}}"></image>
            </div>
        </block>
    </div>
</div>

css:

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: powderblue;
}
.topview{
    width: 100%;
    height: 22%;
    border-bottom: 2vp solid black;
}
.swiperview{
    width: 100%;
    height: 100%;
}
.twoview{
/** width: 100%;**/
    display: flex;
    overflow: scroll;
    height: 22%;
    border-bottom: 2vp solid black;
}
.box{
    width: 100%;
    height: 100%;
}
.hbox{
    width: 42%;
    height: 100%;
/*    border: 1vp solid black;*/
    margin: 22vp;
/*     border-radius: 10vp;*/
}
.imgview {
    width: 100%;
    height: 100%;
    border-radius: 10vp;
}

js:

export default {
    data: {
        swiperdatas:["common/images/a1.png","common/images/a2.png","common/images/a3.png"],

        imagedatas:["common/icon/a1.jpg","common/icon/a2.jpg","common/icon/a3.jpg","common/icon/a4.jpg",
        "common/icon/a5.jpg","common/icon/a6.jpg","common/icon/a7.jpg","common/icon/a8.jpg",
        "common/icon/a9.jpg","common/icon/a12.jpg"]
    }
}

实现效果：

---

三、鸿蒙JavaScript的增删改查

代码如下：
hml:

<div class="container">
    <div class="topview">
        <div class="btnview" onclick="add">
            <text>增加</text>
        </div>
        <div class="btnview" onclick="delall">
            <text>全部删除</text>
        </div>
    </div>
    <div class="contentview">
        <block for="{{arrsdatas}}">
            <div class="boxview">
                <text>{{$item}}</text>
                <button type="text" onclick="delitem({{$idx}})" class="delbtn">删除</button>
            </div>
        </block>
    </div>

</div>

css:

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #dff0f6;

}

.topview {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;


}
.contentview{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: scroll;
    background-color: #c2dff6;


}
.btnview{
    width: 40%;
    height: 50%;
    background-color: #83b8d4;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border-radius: 10px;
    color: white;
}
.boxview{
    width: 100%;
    height: 12%;
/*    width: 12%;*/
/*    height: 100%;*/
    border: 1vp solid white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 5px;

}
.delbtn{
    font-size: 18px;
    letter-spacing: 2px;
}

js:

import prompt from '@system.prompt';
export default {
    data: {
        arrsdatas:[]
    },
    onInit() //onInit  页面初始化加载
    {
        //arrs放100个字符串类型的数据
        // var  和  let 区别
        //javascript是个弱类型语言  java是个强类型语言
        for(let  i =0 ; i<=10; i++)
        {
            //数组放入数据  第+i+项
            this.arrsdatas.push("第"+i+"项");
        }
    },
    delall(){
        prompt.showDialog({
            title:"操作提示",
            message:"确定全部删除？",
            buttons:[{"text":"确认","color":"#000000"},{"text":"取消","color":"#000000"}],
            success:(event)=>{
                if(event.index == 0) {
                    //删除所有只需要把arrdataset重新赋值为空
                    this.arrsdatas = [];
                }
                if(event.index == 1) {
                    prompt.showToast({
                        message:"你取消了删除操作",
                        duration:6000
                    })
                }
            }
        })

    },
    add() {
        //添加随机数据 使用js
        //数值范围 0~ <数值
        let rv = parseInt(Math.random()*11);//取整
        this.arrsdatas.push("随机数 " + rv);
    },
    delitem(index){
        prompt.showDialog({
            title:"操作提示",
            message:"确定删除这条数据吗？",
            buttons:[{"text":"确认","color":"#000000"},{"text":"取消","color":"#000000"}],
            success:(event)=>{
                if(event.index == 0) {
                    this.arrsdatas.splice(index, 1);
                }
                if(event.index == 1) {
                    prompt.showToast({
                        message:"你取消了删除操作",
                        duration:6000
                    })
                }
            }
        })

    }
}

实现效果：

---

四、鸿蒙JavaScript的分页

代码如下：
hml：

<div class="container">
    <div class="contentview">
        <block for="{{listdata}}">
            <div class="lineview">
                <text>{{$item}}</text>
            </div>
        </block>
    </div>
    <div class="operateview" onclick="loadmore" disabled="{{flag}}">
        <text>{{loadtext}}</text>
    </div>
</div>

css:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.contentview {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: scroll;
}
.lineview{
    width: 100%;
    height: 12%;
/*    width: 12%;*/
/*    height: 100%;*/
    border: 1vp solid white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 5px;

}
.operateview {
    font-size: 30px;
    text-align: center;
    width: 100%;
    height: 80vp;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #a0d1e7;
    opacity: 0.8;
    border-radius: 10px;
}

js:

import prompt from '@system.prompt';
//每页几条
const PAGE_NUM = 10;
export default {
    data: {
        arrsdatas:[],
        listdata:[],//每次放10条
        currentPage:1,
        loadtext: "加载更多",
        flag:false,
    },
    onInit() //onInit  页面初始化加载
    {
        //50条数据 为什么要分页？1.一次性加载会影响页面渲染的性能 2.用户可能只需要前20条
        for(let  i =0 ; i<=50; i++)
        {
            //数组放入数据  第+i+项
            this.arrsdatas.push("第"+i+"项");
        }
        //使用js原生API分页,slice截取并没有删除
        this.listdata = this.arrsdatas.slice(0, this.currentPage*PAGE_NUM);
    },
    loadmore() {
        this.currentPage ++;
        prompt.showToast({
            message:"加载的是：第" + this.currentPage + "页数据",
        });
        //1.总共的条数
        let maxSize = this.arrsdatas.length%PAGE_NUM==0 ?
                    this.arrsdatas.length/PAGE_NUM : parseInt(this.arrsdatas.length/PAGE_NUM);
        //2.总共的条数/每页条数 = 页数
        if(this.currentPage > maxSize) {
            prompt.showToast({
                message:"数据已全部加载完毕！",
            });
            this.loadtext = "到底了~";
            this.flag = true;
        } else {
            this.listdata = this.arrsdatas.slice(0, this.currentPage*PAGE_NUM);
        }
    }
}

效果如下：

---

总结

解决文档中overflow:scroll无法横向滚动的问题，使用提示框prompt的时候注意要导入包

import prompt from ‘@system.prompt’;

否则会报错。