文章目录

• 前言
• 一、overflow横向滚动视图
• 二、轮播图练习
• 三、鸿蒙JavaScript的增删改查
• 四、鸿蒙JavaScript的分页
• 总结

前言

今天对昨天的作业——横向滚动视图进行了讲解，做了一个轮播图的练习，之后学习了鸿蒙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’;

否则会报错。