stack

概述

基本容器，子组件排列方式为层叠排列，每个直接子组件按照先后顺序依次堆叠，覆盖前一个子组件。

使用限制

子组件

支持。

属性

支持 通用属性。

样式

支持 通用样式。

事件

不支持swipe事件，除了支持 通用事件 以外，还支持如下事件。

方法

示例代码

<template>
  <div class="container">
    <div class="page-title-wrap">
      <text class="page-title">{{componentName}}</text>
    </div>

    <stack class="stack">
      <image class="image" src="/Common/xmad.jpg"></image>
      <text class="title">The stack container is arranged in a stack, and each sub-assembly is stacked in order, covering the previous components.</text>
      <div class="wrap">
        <image class="btn" src="/Common/home.png"></image>
      </div>
    </stack>
  </div>
</template>

<style>
    .container {
      flex: 1;
      flex-direction: column;
    }
    .page-title-wrap {
      padding-top: 50px;
      padding-bottom: 80px;
      justify-content: center;
    }
    .page-title {
      padding-top: 30px;
      padding-bottom: 30px;
      padding-left: 40px;
      padding-right: 40px;
      border-color: #bbbbbb;
      color: #bbbbbb;
      border-bottom-width: 2px;
    }
    .stack {
      height: 300px;
      margin-left: 30px;
      margin-right: 30px;
      align-items: flex-start;
    }

    .image {
      width: 100%;
      height: 100%;
    }

    .title {
      color: #00ff00;
      lines: 2;
    }

    .wrap {
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
    }
    .btn {
      height: 80px;
      text-align: center;
      border-radius: 5px;
      margin-right: 60px;
      margin-left: 60px;
      margin-bottom: 50px;
      color: #ffffff;
      font-size: 30px;
      background-color: #0faeff;
    }
</style>

<script>
    export default {
        data: {
            componentName: 'stack'
        },
        onInit() {
            this.$page.setTitleBar({ text: 'stack' })
        }
    }
</script>

效果图如下：

版本更新说明

相关链接

[h2]案例

如何在快应用图标的右上角添加角标