From 732300fb7d24dafcd450040df6ca9b2cf7b7b5d2 Mon Sep 17 00:00:00 2001
From: shutao <shutao@dcloud.io>
Date: Wed, 29 Nov 2023 19:36:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20overflow=20=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                          |  8 +++
 pages/CSS/overflow/overflow.test.js | 16 +++++
 pages/CSS/overflow/overflow.uvue    | 92 +++++++++++++++++++++++++++++
 pages/tabBar/CSS.uvue               | 10 ++++
 4 files changed, 126 insertions(+)
 create mode 100644 pages/CSS/overflow/overflow.test.js
 create mode 100644 pages/CSS/overflow/overflow.uvue

diff --git a/pages.json b/pages.json
index 92cc5f4e..d0737003 100644
--- a/pages.json
+++ b/pages.json
@@ -1090,6 +1090,14 @@
         "navigationBarTitleText" : "touch-event",
         "enablePullDownRefresh" : false
       }
+    },
+    {
+      "path" : "pages/CSS/overflow/overflow",
+      "style" :
+      {
+        "navigationBarTitleText" : "overflow",
+        "enablePullDownRefresh" : false
+      }
     }
   ],
   "globalStyle": {
diff --git a/pages/CSS/overflow/overflow.test.js b/pages/CSS/overflow/overflow.test.js
new file mode 100644
index 00000000..e2e22bed
--- /dev/null
+++ b/pages/CSS/overflow/overflow.test.js
@@ -0,0 +1,16 @@
+describe('component-native-list-view', () => {
+  let page
+  beforeAll(async () => {
+    //打开list-view测试页
+    page = await program.reLaunch('/pages/CSS/overflow/overflow')
+    await page.waitFor("image")
+  })
+
+  //检测overflow设置hidden，visible
+  it('check_view_overflow', async () => {
+    const image = await program.screenshot({
+      fullPage: true,
+    });
+    expect(image).toMatchImageSnapshot();
+  })
+})
diff --git a/pages/CSS/overflow/overflow.uvue b/pages/CSS/overflow/overflow.uvue
new file mode 100644
index 00000000..982676ca
--- /dev/null
+++ b/pages/CSS/overflow/overflow.uvue
@@ -0,0 +1,92 @@
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1;">
+  <!-- #endif -->
+    <text style="font-size: 15px;">overflow=hidden效果 子元素是view</text>
+    <view class="backgroundview">
+      <view class="box-hidden">
+        <view style="width: 50px; height: 150px; background-color: greenyellow;"></view>
+      </view>
+    </view>
+    <text style="font-size: 15px;">overflow=visible效果 子元素是view</text>
+    <view class="backgroundview">
+      <view class="box-visible">
+        <view style="width: 50px; height: 150px; background-color: greenyellow;"></view>
+      </view>
+    </view>
+    <view style="flex-grow: 1">
+      <text style="font-size: 15px;">overflow=hidden效果 子元素是text</text>
+      <view class="backgroundview">
+        <view class="box-hidden">
+          <text class="text1">ABCDEFG</text>
+        </view>
+      </view>
+      <text style="font-size: 15px;">overflow=visible效果 子元素是text</text>
+      <view class="backgroundview">
+        <view class="box-visible">
+          <text class="text1">ABCDEFG</text>
+        </view>
+      </view>
+
+      <text style="font-size: 15px;">overflow=hidden效果 子元素是image</text>
+      <view class="backgroundview">
+        <view class="box-hidden">
+          <image style="width: 150px; height: 150px;" src="/static/uni.png"></image>
+        </view>
+      </view>
+      <text style="font-size: 15px;">overflow=visible效果 子元素是image</text>
+      <view class="backgroundview">
+        <view class="box-visible">
+          <image style="width: 150px; height: 150px;" src="/static/uni.png"></image>
+        </view>
+      </view>
+
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style>
+  .backgroundview {
+    width: 300px;
+    height: 300px;
+    margin-bottom: 20px;
+    background-color: white;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .box-hidden {
+    width: 100px;
+    height: 100px;
+    border-radius: 20px;
+    overflow: hidden;
+    background-color: green;
+  }
+
+  .box-visible {
+    width: 100px;
+    height: 100px;
+    border-radius: 20px;
+    overflow: visible;
+    background-color: green;
+  }
+
+  .text1 {
+    font-size: 50px;
+  }
+</style>
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index e9cf4394..1e1c5c3d 100644
--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -339,6 +339,16 @@
                 url: '/pages/CSS/transition/transition',
               },
             ] as Page[],
+          },
+          {
+            id: 'overflow',
+            name: 'overflow',
+            pages: [
+              {
+                name: 'overflow',
+                url: '/pages/CSS/overflow/overflow',
+              },
+            ] as Page[],
           },
         ] as ListItem[],
         arrowUpIcon: '/static/icons/arrow-up.png',
-- 
GitLab