新增 overflow 示例

pages.json

@@ -1090,6 +1090,14 @@
         "navigationBarTitleText" : "touch-event",
         "enablePullDownRefresh" : false
       }
+    },
+    {
+      "path" : "pages/CSS/overflow/overflow",
+      "style" :
+      {
+        "navigationBarTitleText" : "overflow",
+        "enablePullDownRefresh" : false
+      }
     }
   ],
   "globalStyle": {

pages/CSS/overflow/overflow.test.js

+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();
+  })
+})

pages/CSS/overflow/overflow.uvue

+<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>

pages/tabBar/CSS.uvue

@@ -340,6 +340,16 @@
               },
             ] as Page[],
           },
+          {
+            id: 'overflow',
+            name: 'overflow',
+            pages: [
+              {
+                name: 'overflow',
+                url: '/pages/CSS/overflow/overflow',
+              },
+            ] as Page[],
+          },
         ] as ListItem[],
         arrowUpIcon: '/static/icons/arrow-up.png',
         arrowDownIcon: '/static/icons/arrow-down.png',