返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发-下拉刷新实现

李洋水蛟龙
2022-04-22 10:45:13
阅读量0
HarmonyOS
1
2

创建项目

  • 示例代码
hml：
  1. <div class="container">
  2.     <refresh refreshing="{{fresh}}" onrefresh="refresh">
  3.         <list class="list" scrolleffect="no">
  4.             <list-item class="listitem" for="list">
  5.                 <div class="content">
  6.                     <text class="text">{{$item}}</text>
  7.                 </div>
  8.             </list-item>
  9.         </list>
  10.     </refresh>
  11. </div>
复制代码

css：
  1. .container {
  2.     flex-direction: column;
  3.     align-items: center;
  4.     width: 100%;
  5.     height: 100%;
  6. }

  8. .list {
  9.     width: 100%;
  10.     height: 100%;
  11. }

  13. .listitem {
  14.     width: 100%;
  15.     height: 150px;
  16. }

  18. .content {
  19.     width: 100%;
  20.     height: 100%;
  21.     flex-direction: column;
  22.     align-items: center;
  23.     justify-content: center;
  24. }

  26. .text {
  27.     font-size: 35px;
  28.     font-weight: bold;
  29. }
复制代码

js：
  1. import prompt from '@system.prompt';
  2. export default {
  3.     data: {
  4.         list:[],
  5.         fresh:false
  6.     },
  7.     onInit() {
  8.         this.list = [];
  9.         for (var i = 0; i <= 2; i++) {
  10.             var item = '列表元素' + i;
  11.             this.list.push(item);
  12.         }
  13.     },
  14.     refresh: function (e) {
  15.         prompt.showToast({
  16.             message: '刷新中...'
  17.         })
  18.         var that = this;
  19.         that.fresh = e.refreshing;
  20.         setTimeout(function () {
  21.             that.fresh = false;
  22.             var addItem = '更新元素';
  23.             that.list.unshift(addItem);
  24.             prompt.showToast({
  25.                 message: '刷新完成!'
  26.             })
  27.         }, 2000)
  28.     }
  29. }
复制代码



举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友