提交 0d430461 编写于 作者: Anne_LXM's avatar Anne_LXM

更新element-get-attribute兼容app和web

上级 a8a8a0d8
jest.setTimeout(30000); jest.setTimeout(30000);
describe('/pages/API/element-get-attribute/element-get-attribute', () => { describe('test element-get-attribute', () => {
let page; let page,platform,attrStyle,propertyValue;
if (!process.env.uniTestPlatformInfo.startsWith('mp')) { platform = process.env.UNI_PLATFORM
it('skip', () => {
expect(1).toBe(1)
})
return
}
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch('/pages/API/element-get-attribute/element-get-attribute') page = await program.reLaunch('/pages/API/element-get-attribute/element-get-attribute')
await page.waitFor(3000); await page.waitFor(3000);
...@@ -17,13 +12,23 @@ describe('/pages/API/element-get-attribute/element-get-attribute', () => { ...@@ -17,13 +12,23 @@ describe('/pages/API/element-get-attribute/element-get-attribute', () => {
}); });
it('check setStyle getAttributeStyle', async () => { it('check setStyle getAttributeStyle', async () => {
await page.callMethod('setStyle') await page.callMethod('setStyle')
if(platform != 'app-plus'){
await page.callMethod('getAttributeStyle') await page.callMethod('getAttributeStyle')
expect(await page.data('attrStyle')).toEqual('background-color:#FFF000'); 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 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 () => { it('check scrollTo', async () => {
await page.callMethod('scrollTo') await page.callMethod('scrollTo')
await page.waitFor(100); await page.waitFor(100);
const scrollView = await page.$('.scroll-view_H') const scrollView = await page.$('.scroll-view_H')
expect(await scrollView.property('scrollLeft')).toBe(200); expect(await scrollView.property('scrollLeft')).toBe(200);
}); });
}
}); });
...@@ -2,28 +2,38 @@ ...@@ -2,28 +2,38 @@
<view> <view>
<view id="box" ref="box" style="padding: 20rpx;"> <view id="box" ref="box" style="padding: 20rpx;">
<text class="uni-title-text">元素的id:{{ attrId }}</text> <text class="uni-title-text">元素的id:{{ attrId }}</text>
<!-- #ifndef APP -->
<text class="uni-title-text">元素的style:{{ attrStyle }}</text> <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">小程序端:getAttribute 获取元素的属性值,目前仅支持id、style</text>
<text class="uni-subtitle-text">App端:getAttribute 不支持获取 class、style 属性</text>
</view> </view>
<button @click="getAttributeId">getAttribute获取元素的id</button> <button @click="getAttributeId">getAttribute获取元素的id</button>
<button @click="setStyle">setProperty设置背景色</button> <button @click="setStyle">setProperty设置背景色</button>
<!-- #ifndef APP -->
<button @click="getAttributeStyle">getAttribute获取元素的style</button> <button @click="getAttributeStyle">getAttribute获取元素的style</button>
<!-- #endif -->
<button @click="getPropertyValue">getPropertyValue获取背景色值</button>
<scroll-view ref="scrollView" class="scroll-view_H" direction="horizontal"> <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-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-green"><text class="text">B</text></view>
<view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view> <view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
</scroll-view> </scroll-view>
<!-- #ifndef WEB -->
<button @click="scrollTo">scrollTo设置left滚动200px</button> <button @click="scrollTo">scrollTo设置left滚动200px</button>
<!-- #endif -->
</view> </view>
</template> </template>
<script> <script lang="uts">
export default { export default {
data() { data() {
return { return {
boxTarget: null as null | UniElement, boxTarget: null as null | UniElement,
scrollViewTarget: null as null | UniElement, scrollViewTarget: null as null | UniElement,
attrId: '', attrId: "",
attrStyle:'' attrStyle:"",
propertyValue:""
} }
}, },
onReady() { onReady() {
...@@ -32,18 +42,26 @@ ...@@ -32,18 +42,26 @@
}, },
methods: { methods: {
scrollTo() { scrollTo() {
// #ifdef MP-WEIXIN
this.scrollViewTarget!.scrollTo({ this.scrollViewTarget!.scrollTo({
left: 200 left: 200
}) })
// #endif
// #ifndef MP-WEIXIN
this.scrollViewTarget!.scrollTo(200,0)
// #endif
}, },
getAttributeId() { getAttributeId() {
this.attrId = this.boxTarget.getAttribute('id') this.attrId = this.boxTarget!.getAttribute('id') ?? ""
}, },
setStyle() { 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() { 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.
先完成此消息的编辑!
想要评论请 注册