Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
fe783562
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6058
Star
93
Fork
166
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
19
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
19
Issue
19
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
fe783562
编写于
12月 10, 2024
作者:
Anne_LXM
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新element-get-attribute兼容app和web
上级
53c729ad
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
44 addition
and
21 deletion
+44
-21
pages/API/element-get-attribute/element-get-attribute.test.js
...s/API/element-get-attribute/element-get-attribute.test.js
+20
-15
pages/API/element-get-attribute/element-get-attribute.uvue
pages/API/element-get-attribute/element-get-attribute.uvue
+24
-6
未找到文件。
pages/API/element-get-attribute/element-get-attribute.test.js
浏览文件 @
fe783562
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
}
describe
(
'
test element-get-attribute
'
,
()
=>
{
let
page
,
platform
,
attrStyle
,
propertyValue
;
platform
=
process
.
env
.
UNI_PLATFORM
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
'
/pages/API/element-get-attribute/element-get-attribute
'
)
await
page
.
waitFor
(
3000
);
...
...
@@ -17,13 +12,23 @@ describe('/pages/API/element-get-attribute/element-get-attribute', () => {
});
it
(
'
check setStyle getAttributeStyle
'
,
async
()
=>
{
await
page
.
callMethod
(
'
setStyle
'
)
await
page
.
callMethod
(
'
getAttributeStyle
'
)
expect
(
await
page
.
data
(
'
attrStyle
'
)).
toEqual
(
'
background-color:#FFF000
'
);
if
(
platform
!=
'
app-plus
'
){
await
page
.
callMethod
(
'
getAttributeStyle
'
)
attrStyle
=
platform
==
'
mp-weixin
'
?
'
background-color:#FFF000;
'
:
'
padding: 0.625rem; background-color: rgb(255, 240, 0);
'
expect
(
await
page
.
data
(
'
attrStyle
'
)).
toEqual
(
attrStyle
);
}
});
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
);
it
(
'
check getPropertyValue
'
,
async
()
=>
{
await
page
.
callMethod
(
'
getPropertyValue
'
)
propertyValue
=
platform
==
'
h5
'
?
'
rgb(255, 240, 0)
'
:
'
#FFF000
'
expect
(
await
page
.
data
(
'
propertyValue
'
)).
toEqual
(
propertyValue
);
});
if
(
platform
!=
'
h5
'
){
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
);
});
}
});
pages/API/element-get-attribute/element-get-attribute.uvue
浏览文件 @
fe783562
...
...
@@ -2,28 +2,38 @@
<view>
<view id="box" ref="box" style="padding: 20rpx;">
<text class="uni-title-text">元素的id:{{ attrId }}</text>
<!-- #ifndef APP -->
<text class="uni-title-text">元素的style:{{ attrStyle }}</text>
<!-- #endif -->
<text class="uni-title-text">元素的背景色样式值:{{ propertyValue }}</text>
<text class="uni-subtitle-text">小程序端:getAttribute 获取元素的属性值,目前仅支持id、style</text>
<text class="uni-subtitle-text">App端:getAttribute 不支持获取 class、style 属性</text>
</view>
<button @click="getAttributeId">getAttribute获取元素的id</button>
<button @click="setStyle">setProperty设置背景色</button>
<!-- #ifndef APP -->
<button @click="getAttributeStyle">getAttribute获取元素的style</button>
<!-- #endif -->
<button @click="getPropertyValue">getPropertyValue获取背景色值</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>
<!-- #ifndef WEB -->
<button @click="scrollTo">scrollTo设置left滚动200px</button>
<!-- #endif -->
</view>
</template>
<script>
<script
lang="uts"
>
export default {
data() {
return {
boxTarget: null as null | UniElement,
scrollViewTarget: null as null | UniElement,
attrId: '',
attrStyle:''
attrId: "",
attrStyle:"",
propertyValue:""
}
},
onReady() {
...
...
@@ -32,18 +42,26 @@
},
methods: {
scrollTo() {
// #ifdef MP-WEIXIN
this.scrollViewTarget!.scrollTo({
left: 200
})
// #endif
// #ifndef MP-WEIXIN
this.scrollViewTarget!.scrollTo(200,0)
// #endif
},
getAttributeId() {
this.attrId = this.boxTarget
.getAttribute('id')
this.attrId = this.boxTarget
!.getAttribute('id') ?? ""
},
setStyle() {
this.boxTarget.style.setProperty("background-color", "#FFF000")
this.boxTarget!.style.setProperty("background-color", "#FFF000")
},
getPropertyValue() {
this.propertyValue = this.boxTarget!.style.getPropertyValue("background-color") as string
},
getAttributeStyle() {
this.attrStyle = this.boxTarget
.getAttribute('style')
this.attrStyle = this.boxTarget
!.getAttribute('style')?? ""
}
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录