From af617ea47b2816ed7911d7cfb9c0f8a9c4b5f212 Mon Sep 17 00:00:00 2001
From: anne-xml <liuxiaomei@dcloud.io>
Date: Mon, 9 Dec 2024 16:25:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Eelement-get-attribute?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    | 11 ++-
 .../element-get-attribute.test.js             | 29 ++++++++
 .../element-get-attribute.uvue                | 67 +++++++++++++++++++
 3 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 pages/API/element-get-attribute/element-get-attribute.test.js
 create mode 100644 pages/API/element-get-attribute/element-get-attribute.uvue

diff --git a/pages.json b/pages.json
index 7a0eee0a..b3537cb7 100644
--- a/pages.json
+++ b/pages.json
@@ -1219,6 +1219,15 @@
 			}
 		},
 		// #endif
+    // #ifdef MP-WEIXIN
+    {
+      "path" : "pages/API/element-get-attribute/element-get-attribute",
+      "style" :
+      {
+        "navigationBarTitleText" : "getAttribute | 获取元素的属性值"
+      }
+    },
+    // #endif
 		// #ifdef APP-ANDROID || APP-IOS
 		{
 			"path": "pages/API/facial-recognition-meta-info/facial-recognition-meta-info",
@@ -3391,4 +3400,4 @@
 			]
 		}
 	]
-}
\ No newline at end of file
+}
diff --git a/pages/API/element-get-attribute/element-get-attribute.test.js b/pages/API/element-get-attribute/element-get-attribute.test.js
new file mode 100644
index 00000000..ef8504f3
--- /dev/null
+++ b/pages/API/element-get-attribute/element-get-attribute.test.js
@@ -0,0 +1,29 @@
+jest.setTimeout(30000);
+describe('/pages/API/element-get-attribute/element-get-attribute', () => {
+  let page;
+  if (!process.env.uniTestPlatformInfo.startsWith('mp')) {
+    it('skip', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/API/element-get-attribute/element-get-attribute')
+    await page.waitFor(3000);
+  });
+  it('check getAttributeId', async () => {
+    await page.callMethod('getAttributeId')
+    expect(await page.data('attrId')).toEqual('box');
+  });
+  it('check setStyle getAttributeStyle', async () => {
+    await page.callMethod('setStyle')
+    await page.callMethod('getAttributeStyle')
+    expect(await page.data('attrStyle')).toEqual('background-color:#FFF000');
+  });
+  it('check scrollTo', async () => {
+    await page.callMethod('scrollTo')
+    await page.waitFor(100);
+    const scrollView =  await page.$('.scroll-view_H')
+    expect(await scrollView.property('scrollLeft')).toBe(200);
+  });
+});
diff --git a/pages/API/element-get-attribute/element-get-attribute.uvue b/pages/API/element-get-attribute/element-get-attribute.uvue
new file mode 100644
index 00000000..f623659e
--- /dev/null
+++ b/pages/API/element-get-attribute/element-get-attribute.uvue
@@ -0,0 +1,67 @@
+<template>
+  <view>
+    <view id="box" ref="box" style="padding: 20rpx;">
+      <text class="uni-title-text">元素的id：{{ attrId }}</text>
+      <text class="uni-title-text">元素的style：{{ attrStyle }}</text>
+      <text class="uni-subtitle-text">小程序端：getAttribute 获取元素的属性值，目前仅支持id、style</text>
+    </view>
+    <button @click="getAttributeId">getAttribute获取元素的id</button>
+    <button @click="setStyle">setProperty设置背景色</button>
+    <button @click="getAttributeStyle">getAttribute获取元素的style</button>
+    <scroll-view ref="scrollView" class="scroll-view_H" direction="horizontal">
+      <view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
+      <view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
+      <view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
+    </scroll-view>
+    <button @click="scrollTo">scrollTo设置left滚动200px</button>
+  </view>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        boxTarget: null as null | UniElement,
+        scrollViewTarget: null as null | UniElement,
+        attrId: '',
+        attrStyle:''
+      }
+    },
+    onReady() {
+      this.boxTarget = this.$refs['box'] as UniElement
+      this.scrollViewTarget = this.$refs['scrollView'] as UniElement;
+    },
+    methods: {
+      scrollTo() {
+        this.scrollViewTarget!.scrollTo({
+          left: 200
+        })
+      },
+      getAttributeId() {
+        this.attrId = this.boxTarget.getAttribute('id')
+      },
+      setStyle() {
+        this.boxTarget.style.setProperty("background-color", "#FFF000")
+      },
+      getAttributeStyle() {
+        this.attrStyle = this.boxTarget.getAttribute('style')
+      }
+    }
+  }
+</script>
+<style>
+  .scroll-view_H {
+    width: 100%;
+    flex-direction: row;
+    margin-top:30rpx;
+  }
+  .scroll-view-item_H {
+    width: 100%;
+    height: 150px;
+    justify-content: center;
+    align-items: center;
+  }
+  .text {
+    font-size: 18px;
+    color: #ffffff;
+  }
+</style>
-- 
GitLab