鸿蒙Progress 拖动效果

转载

mob64ca1407216b 2024-12-25 13:36:29

文章标签 鸿蒙Progress 拖动效果学习 javascript 开发语言数据 文章分类 云原生云计算

学习产出：

1.今天继续尝试水平滚动

官方开发文档是说只支持纵向的其时候可以其实是错的

鸿蒙Progress 拖动效果_开发语言

.twoview{
 display: flex;
 overflow: scroll;
 height: 22%;
 border-bottom: 2vp solid black;
}
 .threeview{
 display: flex;
 overflow: scroll;
 flex-direction: column;
 align-items: center;
 height: 22%;
 border-bottom: 2vp solid black;

实现效果：

鸿蒙Progress 拖动效果_数据_02

2.今天学习第一个目标是增删改查

2.1首先先把数据准备好

鸿蒙Progress 拖动效果_数据_03

2.2先写全部删除，全部删除比较简单，只要把数组值改查空就好了，加一个按钮绑定一个删除键，在删除时添加一个对话框来提醒用户防止用户错误操作。

delall()
 {
 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));
 if(event.index == 0)
 {
 this.arrdatas = [];
 }
 if(event.index == 1)
 {
 prompt.showDialog({
 message:“你已经取消”,
 duration:6000
 });
 }
 }
 })
 },
 2.3然后写增，用js的随机数来增加一条数据。
 add()
 {

let rv = parseInt(Math.random()*11);

console.log(“随机数是：”+rv);

console.log(typeof rv); //typeof 用来在调试的时候获得数据类型，很好用

this.arrdatas.push("随机数为"+rv);
},
2.4然后是每条数据的删除，因为数组是有下表的，通过下标就可以实现单条删除，再加上对话框和一些小小细节

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));
                if(event.index == 0){
                    this.arrdatas.splice(index,1)
                }
                if(event.index == 1)
                {
                    prompt.showDialog({
                        message:"你已经取消",
                        duration:6000
                    });
                }
            }
        }
    );
}
2.5用flex布局搞一下，测试了一下没有问题

鸿蒙Progress 拖动效果_开发语言_04