【快应用】list组件属性的运用指导

这篇具有很好参考价值的文章主要介绍了【快应用】list组件属性的运用指导。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【关键词】

list、瀑布流、刷新、页面布局

【问题背景】

1、  页面部分内容需要瀑布流格式展示,在使用lsit列表组件设置columns进行多列渲染时,此时在里面加入刷新动画时,动画只占了list组件的一列,并没有完全占据一行宽度,这种情形我们该如何处理?

如下图所示

2、当页面是可滑动时,嵌套了一个list组件,滑动list组件时,页面的内容不会跟着list组件滑动,只有当list组件滑动到顶/底,不能滑动时才能滑动页面的内容,这个我们该如何避免?

【解决方案】

1、是因为在设置list列数后,list-item是会跟设置的列数平均分配,所以会出现动画组件占了一部分的问题,我们可以给想要独占一行渲染的list-item组件设置column-span属性即可解决,即list中的columns设置的是多少,在对应的list-item中的column-span就设为多少。

修改如下:

        <div class="item-container">

          <div class="item-content">

            <list class="list" style="columns: 2; layout-type: stagger">

              <list-item type="item5" for="item in staggerlist" style="height:{{item.height}}px;">

                <text class="txt">{{ item.name }}</text>

              </list-item>

              <list-item type="item6" class="load-more" if="{{loadMore}}" style="column-span: 2">

                <progress type="circular"></progress>

                <text>更多...</text>

              </list-item>

            </list>

          </div>

        </div>

截图:

Tips:ist-item的column-span数值小于等于其父组件list的columns数值,则表现为占有column-span列宽度的样式;否则,list-item 组件将表现为column-span: 1的样式。

2、  该问题可以设置list的scrollpage属性为true,将list顶部页面中非list部分随list一起滑出可视区域。

实现代码如下:文章来源地址https://www.toymoban.com/news/detail-633664.html

<template>

  <!-- Only one root node is allowed in template. -->

  <div class="container">

    <tabs>

      <tab-content>

        <div class="item-container">

          <image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image>

          <image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image>

          <image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image>

          <div class="item-content">

            <list class="list" style="columns: 2; layout-type: stagger" scrollpage="true">

              <list-item type="item1" style="background-color: white; border-radius: 10px; column-span: 2">

                <div style="flex-wrap: wrap">

                  <text class="item" for="textlist">{{ $item }}</text>

                </div>

              </list-item>

              <list-item type="item2" style="column-span: 2">

                <swiper style="width: 100%; height: 200px; margin-top: 20px">

                  <image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image>

                  <image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image>

                  <image src="/Common/logo.png" style="width: 100%; height: 200px; margin-top: 20px"></image>

                </swiper>

              </list-item>

              <list-item type="item3" style="margin-top: 20px; background-color: white; border-radius: 10px; column-span: 2">

                <text style="width: 100px">1</text>

                <text style="width: 100px">2</text>

                <text style="width: 100px">3</text>

              </list-item>

              <!-- <list-item type="item4" for="itemlist">

                <text class="txt" style="height: 150px">{{ $item }}</text>

              </list-item> -->

              <list-item type="item5" for="item in staggerlist" style="height:{{item.height}}px;">

                <text class="txt">{{ item.name }}</text>

              </list-item>

              <list-item type="item6" class="load-more" if="{{loadMore}}" style="column-span: 2">

                <progress type="circular"></progress>

                <text>更多...</text>

              </list-item>

            </list>

          </div>

        </div>

        <!-- tab page2 -->

        <div class="item-container">

          <div class="item-content">

            <list class="list" style="columns: 2; layout-type: stagger">

              <list-item type="item5" for="item in staggerlist" style="height:{{item.height}}px;">

                <text class="txt">{{ item.name }}</text>

              </list-item>

              <list-item type="item6" class="load-more" if="{{loadMore}}" style="column-span: 2">

                <progress type="circular"></progress>

                <text>更多...</text>

              </list-item>

            </list>

          </div>

        </div>

      </tab-content>

      <tab-bar>

        <text class="tab-text">tab1</text>

        <text class="tab-text">tab2</text>

      </tab-bar>

    </tabs>

  </div>

</template>

 

<style>

  .container {

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: rgb(9, 253, 9);

  }

  .tab-bar {

    height: 100px;

    border-color: #bbbbbb;

    color: #bbbbbb;

    border-bottom-width: 1px;

  }

  .tab-text {

    width: 300px;

    text-align: center;

  }

  .tab-text:active {

    color: #f76160;

  }

  .list {

    width: 100%;

    height: 100%;

  }

  .txt {

    width: 100%;

    margin: 10px;

    background-color: white;

  }

  .item {

    height: 150px;

    width: 150px;

    text-align: center;

    border: 1px solid #000000;

    margin: 10px;

  }

  .item-container {

    padding-top: 30px;

    padding-left: 30px;

    padding-right: 30px;

    flex-direction: column;

  }

  .load-more {

    justify-content: center;

    align-items: center;

    height: 100px;

    border-color: #bbbbbb;

    border-bottom-width: 1px;

  }

</style>

 

<script>

  module.exports = {

    data: {

      textlist: ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7', 'test8'],

      itemlist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],

      staggerlist: [{ height: 100, name: 'A' }, { height: 300, name: 'B' }, { height: 250, name: 'C' }, { height: 220, name: 'D' }, { height: 300, name: 'E' }, { height: 100, name: 'F' }, { height: 90, name: 'G' }, { height: 170, name: 'A' }, { height: 320, name: 'B' }, { height: 150, name: 'C' }, { height: 120, name: 'D' }, { height: 200, name: 'E' }, { height: 100, name: 'F' }, { height: 60, name: 'G' }],

      loadMore: true,

    },

  }

</script>

到了这里,关于【快应用】list组件属性的运用指导的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:组件标识)

    id为组件的唯一标识,在整个应用内唯一。本模块提供组件标识相关接口,可以获取指定id组件的属性,也提供向指定id组件发送事件的功能。 说明: 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 名称 参数说明 描述 id string 组件

    2024年04月22日
    浏览(65)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:组件内容模糊)

    为当前组件添加内容模糊效果。 说明: 从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 foregroundBlurStyle(value: BlurStyle, options?: ForegroundBlurStyleOptions) 为当前组件提供内容模糊能力。 系统能力:  SystemCapability.ArkUI.ArkUI.Full 参数: 参数

    2024年03月09日
    浏览(55)
  • Allegro172版本如何用自带功能改变过孔网络属性操作指导

    Allegro172 版本如何用自带功能改变过孔网络属性操作指导 在用Allegro做PCB设计的时候,时常会需要将过孔的网络进行变更,可以将原来的过孔删除,再重新打一个,这种方法难免会繁琐一些。 当然我们可以借助skill工具来完成更换过孔网络的更改,除此之外,Allegro自带的功能

    2024年02月20日
    浏览(37)
  • 数据结构之线性表的类型运用Linear Lists: 数组,栈,队列,链表

    定义 一个最简单,最基本的数据结构。一个线性表由多个相同类型的元素穿在一次,并且每一个元素都一个前驱(前一个元素)和后继(后一个元素)。 线性表的类型 常见的类型:数组、栈、队列、链表 这些不同数据结构的特性可以解决不同种类的问题 题面 题目描述 有

    2024年02月12日
    浏览(44)
  • HTML5 article标签,<time>...</time>标签和pubdate属性的运用

            article标签代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报竟杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件,或者其他任何独立的内容。把文章正文放在header元素后面的p元素中,然后用section标签

    2024年02月02日
    浏览(43)
  • 开发指导—利用组件&插值器动画实现 HarmonyOS 动效

    在组件上创建和运行动画的快捷方式。具体用法请参考通用方法。 通过调用 animate 方法获得 animation 对象,animation 对象支持动画属性、动画方法和动画事件。 说明 ● 使用 animate 方法时必须传入 Keyframes 和 Options 参数。 ● 多次调用 animate 方法时,采用 replace 策略,即最后一

    2024年02月09日
    浏览(36)
  • 两个list如何根据一个list中的属性去过滤掉另一个list中不包含这部分的属性,用流实现

    要是需要GPT Plus账号的小伙伴可以联系我~ 你可以使用Java 8的流来实现这个功能。假设你有两个包含对象的List,每个对象有一个属性,你想根据一个List中的属性值来过滤掉另一个List中不包含这个属性值的对象。下面是一种使用流的方式来实现这个功能 在上面的例子中,我们

    2024年02月12日
    浏览(45)
  • vue3中怎么运用组件

    目录 1.组件的作用 2.如何创建一个组件 3.如何使用一个组件 4.传递和接收组件属性 5.总结 Vue3是目前最流行的前端框架之一。Vue3基于组件化开发,也就是说,所有功能都是由编写简单的组件来实现的。本篇博客主要介绍Vue3中如何运用组件。 1.组件的作用 组件是Vue3中最重要的

    2023年04月15日
    浏览(32)
  • 鸿蒙实战多媒体运用:【音频组件】

    音频组件用于实现音频相关的功能,包括音频播放,录制,音量管理和设备管理。 图 1  音频组件架构图 基本概念 采样 采样是指将连续时域上的模拟信号按照一定的时间间隔采样,获取到离散时域上离散信号的过程。 采样率 采样率为每秒从连续信号中提取并组成离散信号

    2024年03月10日
    浏览(77)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包