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

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

上级 a8a8a0d8
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);
});
}
});
......@@ -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.
先完成此消息的编辑!
想要评论请 注册