Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6058
Star 93
Fork 166
H
hello uni-app x
提交 5cc644b3 编写于 作者: 雪洛's avatar 雪洛
浏览文件
操作

feat: 适配web端

上级 923ebb5b
隐藏空白更改
内联 并排
Showing with 550 addition and 540 deletion
App.uvue
浏览文件 @ 5cc644b3
......@@ -63,5 +63,8 @@
<style>
/*每个页面公共css */
@import "./common/uni.css";
@import "./common/uni.css";
page {
background-color: #f8f8f8;
}
</style>
components/input-data/input-data.vue
浏览文件 @ 5cc644b3
......@@ -81,7 +81,7 @@
<text class="uni-title-text"> {{title}} </text>
</view>
</view>
<view class="uni-input-wrapper input-wrapper">
<view class="input-wrapper">
<input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input" @blur="blur" @focus="focus" />
<image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image>
......@@ -90,20 +90,15 @@
<style>
.uni-input-wrapper {
padding: 8px 13px;
margin: 10rpx 0;
flex-direction: row;
flex-wrap: nowrap;
background-color: #ffffff;
}
.input-wrapper {
border: 1px solid rgba(0, 0, 0, .08);
flex-direction: row;
justify-content: center;
padding: 0;
margin: 0 20rpx;
flex-direction: row;
flex-wrap: nowrap;
background-color: #ffffff;
}
.input-wrapper_image {
......
components/uni-collapse-item/uni-collapse-item.vue
浏览文件 @ 5cc644b3
......@@ -35,8 +35,8 @@
return {
height: 0,
is_open: this.open as boolean,
boxNode: null as Element | null,
contentNode: null as Element | null,
boxNode: null as UniElement | null,
contentNode: null as UniElement | null,
};
},
watch: {
......@@ -51,8 +51,8 @@
$dispatch(this, 'UniCollapse', 'init', this)
},
mounted() {
this.boxNode = this.$refs['boxRef'] as Element;
this.contentNode = this.$refs['contentRef'] as Element;
this.boxNode = this.$refs['boxRef'] as UniElement;
this.contentNode = this.$refs['contentRef'] as UniElement;
// this.openCollapse(this.open)
},
methods: {
......@@ -67,12 +67,12 @@
openOrClose(open: boolean) {
const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none';
const opacity = open ? 1 : 0
let hide = open ? 'flex' : 'none';
const opacity = open ? "1" : "0"
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide);
this.$nextTick(() => {
contentNode.setProperty('transform', ani_transform);
contentNode.setProperty('transform', ani_transform);
contentNode.setProperty('opacity', opacity);
})
}
......@@ -80,9 +80,9 @@
}
</script>
<style scoped>
.uni-collapse-item {
background-color: #fff;
<style scoped>
.uni-collapse-item {
background-color: #fff;
}
.uni-collapse-item__title {
flex-direction: row;
......@@ -115,11 +115,11 @@
font-size: 14px;
font-weight: 400;
}
.open--active {
/* background-color: #f0f0f0; */
color: #bbb;
}
.open--active {
/* background-color: #f0f0f0; */
color: #bbb;
}
.is-disabled {
color: #999;
......@@ -134,7 +134,7 @@
width: 100%;
transition-property: transform , opacity;
transition-duration: 0.2s;
transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
</style>
</style>
pages/API/get-app-base-info/get-app-base-info.test.js
浏览文件 @ 5cc644b3
......@@ -6,11 +6,14 @@ describe('ExtApi-GetAppBaseInfo', () => {
let res;
const stringProperties = [
'appId', 'appName', 'appVersion', 'appVersionCode', 'appLanguage',
'language', 'version', 'uniCompileVersion', 'uniPlatform', 'uniRuntimeVersion',
'language', 'uniCompileVersion', 'uniPlatform', 'uniRuntimeVersion',
]
const numberProperties = [
'uniCompileVersionCode', 'uniRuntimeVersionCode'
]
]
if (process.env.uniTestPlatformInfo.indexOf('web') === -1) {
stringProperties.push('version')
}
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(600);
......
pages/API/get-app/get-app.uvue
浏览文件 @ 5cc644b3
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1;padding-bottom: 20px;">
<!-- #endif -->
<view>
<page-head title="getApp"></page-head>
<view class="uni-padding-wrap">
<text class="uni-common-mt">点击按钮调用 App.uvue methods</text>
<text class="margin-top:6px;">increasetLifeCycleNum 方法</text>
<button class="uni-common-mt" @click="_increasetLifeCycleNum">
increase lifeCycleNum
</button>
<text class="uni-common-mt">lifeCycleNum: {{ lifeCycleNum }}</text>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
import { state, setLifeCycleNum } from '@/store/index.uts'
export default {
data() {
return {
lifeCycleNum: 0,
}
},
onReady() {
this.lifeCycleNum = state.lifeCycleNum
},
methods: {
_increasetLifeCycleNum: function () {
const app = getApp()
app.increasetLifeCycleNum()
this.lifeCycleNum = state.lifeCycleNum
},
// 自动化测试
setLifeCycleNum(num : number) {
setLifeCycleNum(num)
}
},
}
</script>
<style>
.bold {
font-weight: bold;
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1;padding-bottom: 20px;">
<!-- #endif -->
<view>
<page-head title="getApp"></page-head>
<view class="uni-padding-wrap">
<text class="uni-common-mt">点击按钮调用 App.uvue methods</text>
<text class="margin-top:6px;">increasetLifeCycleNum 方法</text>
<button class="uni-common-mt" @click="_increasetLifeCycleNum">
increase lifeCycleNum
</button>
<text class="uni-common-mt">lifeCycleNum: {{ lifeCycleNum }}</text>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
import { state, setLifeCycleNum } from '@/store/index.uts'
export default {
data() {
return {
lifeCycleNum: 0,
}
},
onReady() {
this.lifeCycleNum = state.lifeCycleNum
},
methods: {
_increasetLifeCycleNum: function () {
const app = getApp()
app.increasetLifeCycleNum()
this.lifeCycleNum = state.lifeCycleNum
},
// 自动化测试
setLifeCycleNum(num : number) {
setLifeCycleNum(num)
}
},
}
.hr{border-bottom: 1px solid #ccc;}
</script>
<style>
.bold {
font-weight: bold;
}
.hr{border-bottom: 1px solid #ccc;}
</style>
pages/API/get-element-by-id/get-element-by-id-multiple-root-node.uvue
浏览文件 @ 5cc644b3
......@@ -23,7 +23,7 @@
}
},
methods: {
getElementByNotExistId() : Element | null {
getElementByNotExistId() : UniElement | null {
return uni.getElementById('not-exist-id')
},
changePageHeadBackgroundColor() {
......@@ -37,11 +37,11 @@
changeViewStyle() {
const view = uni.getElementById<UniViewElement>('view')
if (view !== null) {
view.style['width'] = '90%'
view.style['height'] = '50px'
view.style['width'] = '90%'
view.style['height'] = '50px'
view.style['backgroundColor'] = '#007AFF'
}
}
}
}
</script>
</script>
pages/API/get-element-by-id/get-element-by-id.uvue
浏览文件 @ 5cc644b3
......@@ -30,7 +30,7 @@
}
},
methods: {
getElementByNotExistId() : Element | null {
getElementByNotExistId() : UniElement | null {
return uni.getElementById('not-exist-id')
},
changePageHeadBackgroundColor() {
......@@ -38,14 +38,14 @@
pageHead.style['backgroundColor'] = 'red'
},
changeTextColor() {
const text = uni.getElementById('text')!
text.style['color'] = 'red'
},
const text = uni.getElementById('text')!
text.style['color'] = 'red'
},
changeViewStyle() {
const view = uni.getElementById<UniViewElement>('view')
if (view !== null) {
view.style['width'] = '90%'
view.style['height'] = '50px'
view.style['width'] = '90%'
view.style['height'] = '50px'
view.style['backgroundColor'] = '#007AFF'
}
},
......@@ -54,4 +54,4 @@
}
}
}
</script>
</script>
pages/API/get-system-info/get-system-info.test.js
浏览文件 @ 5cc644b3
......@@ -7,7 +7,7 @@ describe('ExtApi-GetSystemInfo', () => {
const stringProperties = [
'appId', 'appLanguage', 'appName', 'appVersion', 'appVersionCode',
'brand', 'deviceId', 'deviceBrand', 'deviceModel', 'deviceType', 'language',
'model', 'version', 'osName', 'osVersion', 'osLanguage', 'platform', 'system', 'ua', 'uniCompileVersion',
'model', 'osName', 'osVersion', 'osLanguage', 'platform', 'system', 'ua', 'uniCompileVersion',
'uniPlatform', 'uniRuntimeVersion', 'romName', 'romVersion',
]
const numberProperties = [
......@@ -15,7 +15,12 @@ describe('ExtApi-GetSystemInfo', () => {
'windowWidth',
'windowHeight', 'windowTop', 'windowBottom', 'screenTop',
'uniCompileVersionCode', 'uniRuntimeVersionCode'
]
]
if (process.env.uniTestPlatformInfo.indexOf('web') === -1) {
stringProperties.push('version')
}
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
......
pages/API/navigator/new-page/onLoad.uvue
浏览文件 @ 5cc644b3
......@@ -55,11 +55,13 @@ export default {
},
// #ifdef WEB
onUnload() {
// web 端页面销毁前,关闭 modal 和 actionsheet
// web 端页面销毁前,关闭 modal 和 actionsheet
// @ts-ignore
const modalBtn = document.querySelector('.uni-modal__btn')
if (modalBtn) {
modalBtn.click()
}
}
// @ts-ignore
const actionSheetBtn = document.querySelector('.uni-actionsheet__action .uni-actionsheet__cell')
if (actionSheetBtn) {
actionSheetBtn.click()
......
pages/API/request/request.test.js
浏览文件 @ 5cc644b3
......@@ -69,10 +69,12 @@ describe('ExtApi-Request', () => {
});
it('Check PATCH', async () => {
await request(page, 'PATCH');
});
it('Check OPTIONS', async () => {
await request(page, 'OPTIONS');
});
});
if (process.env.uniTestPlatformInfo.indexOf('web') === -1) {
it('Check OPTIONS', async () => {
await request(page, 'OPTIONS');
});
}
it('Check HEAD', async () => {
await request(page, 'HEAD');
});
......
pages/CSS/display/flex.uvue
浏览文件 @ 5cc644b3
<template>
<!-- #ifdef APP -->
<view class="page" style="flex:1">
<!-- #endif -->
<view class="head">
<text class="tip">下面有一个灰色区域，display默认值为flex</text>
<text class="tip">当前display值：{{display}}</text>
......@@ -10,9 +8,7 @@
<text style="background-color: aquamarine;">展示display区域</text>
</view>
<button @tap="switchDisplay">切换display属性</button>
<!-- #ifdef APP -->
</view>
<!-- #endif -->
</template>
<script>
......
pages/CSS/display/none.uvue
浏览文件 @ 5cc644b3
<template>
<!-- #ifdef APP -->
<view class="page" style="flex:1">
<!-- #endif -->
<view class="head">
<text class="tip">下面有一个灰色区域，display默认值为none</text>
<text class="tip">当前display值：{{display}}</text>
......@@ -10,9 +8,7 @@
<text style="background-color: aquamarine;">展示display区域</text>
</view>
<button @tap="switchDisplay">切换display属性</button>
<!-- #ifdef APP -->
</view>
<!-- #endif -->
</template>
<script>
......
pages/CSS/layout/z-index.uvue
浏览文件 @ 5cc644b3
......@@ -36,7 +36,7 @@
methods: {
changeZIndex(zIndex : number) {
this.zIndex = 20;
(this.$refs['view'] as Element).style.setProperty('z-index', zIndex);
(this.$refs['view'] as UniElement).style.setProperty('z-index', zIndex);
}
}
}
......
pages/CSS/transform/rotate.uvue
浏览文件 @ 5cc644b3
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<view class="trace">
<view class="base reserve">
......@@ -39,9 +37,7 @@
<text>转变后位置</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
......
pages/CSS/transform/scale.uvue
浏览文件 @ 5cc644b3
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<view class="trace">
<view class="base reserve">
<text class="reserve-text">scaleX(0.6)</text>
......@@ -30,10 +27,7 @@
<text>scale(1.2,1.2)</text>
<text>转变后位置</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
......
pages/CSS/transform/translate.uvue
浏览文件 @ 5cc644b3
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<view class="trace">
<view class="base reserve">
<text class="reserve-text">translateX(80%)</text>
......@@ -30,10 +27,7 @@
<text>translate(-50%,50%)</text>
<text>转变后位置</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
......
pages/CSS/transition/transition.uvue
浏览文件 @ 5cc644b3
......@@ -52,24 +52,24 @@
data() {
return {
isTranstionWidthOrHeight: false,
widthOrHeight: null as Element | null,
widthOrHeight: null as UniElement | null,
isTranstionChangeMargin: false,
styleMargin: null as Element | null,
styleMargin: null as UniElement | null,
isTransitionStylePadding: false,
stylePadding: null as Element | null,
stylePadding: null as UniElement | null,
isTransitionstyleBackground: false,
styleBackground: null as Element | null,
styleBackground: null as UniElement | null,
isTransitionStyleTransform: false,
styleTransform: null as Element | null,
styleTransform: null as UniElement | null,
isTransitionstyleBorder: false,
styleBorder: null as Element | null,
styleBorder: null as UniElement | null,
isTransitionstylePosition: false,
stylePosition: null as Element | null,
stylePosition: null as UniElement | null,
isSetTransition: false,
isTransitionpropertystyleBackground: false,
propertyStyleBackground: null as Element | null,
propertyStyleBackground: null as UniElement | null,
isTransitionStyleTransformWithOrigin: false,
styleTransformWithOrigin: null as Element | null,
styleTransformWithOrigin: null as UniElement | null,
}
},
onReady() {
......
pages/component/checkbox/checkbox.test.js
浏览文件 @ 5cc644b3
......@@ -42,26 +42,26 @@ describe('Checkbox.uvue', () => {
})
it('checked', async () => {
const cb = await page.$('.cb')
expect(await cb.property('checked')).toBe(true)
expect(await cb.attribute('checked')).toBe(true)
await page.setData({
checked: false,
})
expect(await cb.property('checked')).toBe(false)
expect(await cb.attribute('checked')).toBe(false)
})
it('color', async () => {
const cb = await page.$('.cb')
expect(await cb.property('color')).toBe('#007aff')
expect(await cb.attribute('color')).toBe('#007aff')
await page.setData({
color: '#63acfc',
})
expect(await cb.property('color')).toBe('#63acfc')
expect(await cb.attribute('color')).toBe('#63acfc')
})
it('disabled', async () => {
const cb = await page.$('.cb2')
expect(await cb.property('disabled')).toBe(true)
expect(await cb.attribute('disabled')).toBe(true)
await page.setData({
disabled: false,
})
expect(await cb.property('disabled')).toBe(false)
expect(await cb.attribute('disabled')).toBe(false)
})
})
pages/component/form/form.uvue
浏览文件 @ 5cc644b3
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<form @submit="onFormSubmit" @reset="onFormReset">
<view class="uni-form-item">
<view class="title">姓名</view>
......@@ -11,10 +9,10 @@
<view class="title">性别</view>
<radio-group name="gender" class="flex-row">
<view class="group-item">
<radio :value="0" :checked="gender=='0'" /><text>男</text>
<radio value="0" :checked="gender=='0'" /><text>男</text>
</view>
<view class="group-item">
<radio :value="1" :checked="gender=='1'" /><text>女</text>
<radio value="1" :checked="gender=='1'" /><text>女</text>
</view>
</radio-group>
</view>
......@@ -46,9 +44,7 @@
</form>
<view class="result">提交的表单数据</view>
<textarea class="textarea" :value="formDataText"></textarea>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
......
pages/component/general-attribute/general-attribute.uvue
浏览文件 @ 5cc644b3
......@@ -70,7 +70,7 @@ export default {
},
methods: {
validateGeneralAttributes() {
const generalTarget = this.$refs['general-target'] as Element
const generalTarget = this.$refs['general-target'] as UniElement
const generalId = generalTarget.getAttribute('id')
if (generalId != this.generalId) {
this.validateGeneralAttrText = '基础属性 id 验证失败'
......@@ -103,7 +103,7 @@ export default {
this.validateGeneralAttrText = '基础属性验证成功'
},
changeHeight(){
const generalTarget = this.$refs['general-target'] as Element
const generalTarget = this.$refs['general-target'] as UniElement
this.changeHeightByRefText = '已通过 ref 修改高度'
generalTarget.style.setProperty('height', '200px')
}
......
pages/component/general-event/touch-event.uvue
浏览文件 @ 5cc644b3
......@@ -28,7 +28,7 @@
lastX: 0,
lastY: 0,
touchEvent: null as TouchEvent | null,
icon: null as Element | null
icon: null as UniElement | null
}
},
onReady() {
......
pages/component/general-event/transition-event.test.js
浏览文件 @ 5cc644b3
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('transition event', () => {
if (process.env.uniTestPlatformInfo.indexOf('web') > -1) {
it('dummyTest', () => {
expect(1).toBe(1)
})
return
}
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/component/general-event/transition-event')
......
pages/component/general-event/transition-event.uvue
浏览文件 @ 5cc644b3
......@@ -15,7 +15,7 @@
data() {
return {
times: 0,
element: null as Element | null,
element: null as UniElement | null,
isStart: false,
buttonValue: "开启图片旋转",
onTransitionEndTriggr: false
......@@ -57,7 +57,7 @@
height: 400rpx;
margin: 50rpx auto;
border-radius: 200rpx;
transition-duration: 2000;
transition-duration: 2000ms;
transition-property: transform;
transition-timing-function: linear;
transform: rotate(0deg);
......
pages/component/input/input.test.js
浏览文件 @ 5cc644b3
......@@ -17,24 +17,24 @@ describe('component-native-input', () => {
// 测试焦点及键盘弹起
it('focus', async () => {
const input = await page.$('#uni-input-focus');
expect(await input.property('focus')).toBe("true")
expect(await input.attribute('focus')).toBe(true)
// expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(true)
await page.setData({
focus: false,
})
expect(await input.property('focus')).toBe("false")
expect(await input.attribute('focus')).toBe(false)
// await page.waitFor(1000)
// expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(false)
// await page.setData({
// focus: true,
// })
// expect(await input.property('focus')).toBe(true)
// expect(await input.attribute('focus')).toBe(true)
// await page.waitFor(1000)
// expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(true)
// await page.setData({
// focus: false,
// })
// expect(await input.property('focus')).toBe(false)
// expect(await input.attribute('focus')).toBe(false)
// await page.waitFor(1000)
// expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(false)
// await page.waitFor(1000)
......@@ -43,7 +43,7 @@ describe('component-native-input', () => {
// 测试修改value属性
it("value", async () => {
const input = await page.$('#uni-input-default');
expect(await input.property('value')).toEqual("hello uni-app x")
expect(await input.attribute('value')).toEqual("hello uni-app x")
})
//测试input的类型
......@@ -52,21 +52,21 @@ describe('component-native-input', () => {
const number = await page.$('#uni-input-type-number');
const digit = await page.$('#uni-input-type-digit');
const tel = await page.$('#uni-input-type-tel');
expect(await text.property('type')).toEqual("text")
expect(await number.property('type')).toEqual("number")
expect(await digit.property('type')).toEqual("digit")
expect(await tel.property('type')).toEqual("tel")
expect(await text.attribute('type')).toEqual("text")
expect(await number.attribute('type')).toEqual("number")
expect(await digit.attribute('type')).toEqual("digit")
expect(await tel.attribute('type')).toEqual("tel")
})
// 测试密码属性
// it("password", async () => {
// const input = await page.$('.uni-input-password');
// expect(await input.property('password')).toBe(true)
// expect(await input.attribute('password')).toBe(true)
// await page.setData({
// inputPassword: false,
// inputPasswordValue: "inputPasswordValue"
// })
// expect(await input.property('password')).toBe(false)
// expect(await input.attribute('password')).toBe(false)
// await page.waitFor(500)
// await page.setData({
// inputPassword: true
......@@ -75,21 +75,21 @@ describe('component-native-input', () => {
// 测试placeholder
// it("placeholder", async () => {
// const placeholder1 = await page.$('.uni-input-placeholder1');
// expect(await placeholder1.property("placeholder-style")).toMatchObject({
// expect(await placeholder1.attribute("placeholder-style")).toMatchObject({
// "color": "red"
// })
// expect(await placeholder1.property("placeholder")).toEqual("占位符文字颜色为红色")
// expect(await placeholder1.attribute("placeholder")).toEqual("占位符文字颜色为红色")
// await page.setData({
// inputPlaceHolderStyle: "color:#CC00CC",
// })
// expect(await placeholder1.property("placeholder-style")).toMatchObject({
// expect(await placeholder1.attribute("placeholder-style")).toMatchObject({
// "color": "#CC00CC"
// })
// await page.setData({
// inputPlaceHolderStyle: "color:#CC19CC;background-color:#00b1c0",
// })
// expect(await placeholder1.property("placeholder-style")).toMatchObject({
// expect(await placeholder1.attribute("placeholder-style")).toMatchObject({
// "color": "#CC19CC",
// "backgroundColor": "#00b1c0"
// })
......@@ -97,7 +97,7 @@ describe('component-native-input', () => {
// await page.setData({
// inputPlaceHolderStyle: "color:#CC19CC;background-color:#00b1c0;text-align:center;font-size:44px;font-weight:900",
// })
// expect(await placeholder1.property("placeholder-style")).toEqual({
// expect(await placeholder1.attribute("placeholder-style")).toEqual({
// "backgroundColor": "#00b1c0",
// "color": "#CC19CC",
// "fontSize": "44px",
......@@ -106,29 +106,29 @@ describe('component-native-input', () => {
// })
// const placeholder2 = await page.$('.uni-input-placeholder2');
// expect(await placeholder2.property("placeholder-class")).toMatchObject({
// expect(await placeholder2.attribute("placeholder-class")).toMatchObject({
// "backgroundColor": "#008000"
// })
// await page.setData({
// inputPlaceHolderClass: "uni-input-placeholder-class-ts",
// })
// expect(await placeholder2.property("placeholder-class")).toMatchObject({
// expect(await placeholder2.attribute("placeholder-class")).toMatchObject({
// "backgroundColor": "#FFA500"
// })
// expect(await placeholder2.property("placeholder")).toEqual("占位符背景色为绿色")
// expect(await placeholder2.attribute("placeholder")).toEqual("占位符背景色为绿色")
// })
it("disable", async () => {
const input = await page.$('#uni-input-disable');
expect(await input.property("disabled")).toBe("true")
expect(await input.attribute("disabled")).toBe("true")
})
it("confirm-type", async () => {
expect(await (await page.$('#uni-input-confirm-send')).property("confirmType")).toEqual("send")
expect(await (await page.$('#uni-input-confirm-search')).property("confirmType")).toEqual("search")
expect(await (await page.$('#uni-input-confirm-next')).property("confirmType")).toEqual("next")
expect(await (await page.$('#uni-input-confirm-go')).property("confirmType")).toEqual("go")
expect(await (await page.$('#uni-input-confirm-done')).property("confirmType")).toEqual("done")
expect(await (await page.$('#uni-input-confirm-send')).attribute("confirmType")).toEqual("send")
expect(await (await page.$('#uni-input-confirm-search')).attribute("confirmType")).toEqual("search")
expect(await (await page.$('#uni-input-confirm-next')).attribute("confirmType")).toEqual("next")
expect(await (await page.$('#uni-input-confirm-go')).attribute("confirmType")).toEqual("go")
expect(await (await page.$('#uni-input-confirm-done')).attribute("confirmType")).toEqual("done")
})
// it("maxlength", async () => {
......@@ -144,7 +144,7 @@ describe('component-native-input', () => {
cursor_color: "transparent",
})
await page.waitFor(500)
expect(await (await page.$('#uni-input-cursor-color')).property("cursor-color")).toBe("transparent")
expect(await (await page.$('#uni-input-cursor-color')).attribute("cursor-color")).toBe("transparent")
})
it("afterAllTestScreenshot", async () => {
......
pages/component/input/input.uvue
浏览文件 @ 5cc644b3
......@@ -8,7 +8,7 @@
<view class="uni-title">
<text class="uni-title-text">设置输入框的初始内容</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-default" class="uni-input" value="hello uni-app x" />
</view>
</view>
......@@ -17,16 +17,16 @@
<view class="uni-title">
<text class="uni-title-text">type取值（不同输入法表现可能不一致）</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-type-text" class="uni-input" type="text" placeholder="文本输入键盘" />
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-type-number" class="uni-input" type="number" placeholder="数字输入键盘" />
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-type-digit" class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" />
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-type-tel" class="uni-input" :type="inputTypeTel" placeholder="电话输入键盘" />
</view>
</view>
......@@ -35,7 +35,7 @@
<view class="uni-title">
<text class="uni-title-text">密码输入框</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-password" class="uni-input" :password="inputPassword" :value="inputPasswordValue" />
</view>
</view>
......@@ -44,10 +44,10 @@
<view class="uni-title">
<text class="uni-title-text">占位符样式</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-placeholder1" class="uni-input" :placeholder-style="inputPlaceHolderStyle" placeholder="占位符文字颜色为红色" />
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-placeholder2" class="uni-input" :placeholder-class="inputPlaceHolderClass" placeholder="占位符背景色为绿色" />
</view>
</view>
......@@ -56,7 +56,7 @@
<view class="uni-title">
<text class="uni-title-text">设置禁用输入框</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-disable" class="uni-input" :disabled="true" />
</view>
</view>
......@@ -65,7 +65,7 @@
<view class="uni-title">
<text class="uni-title-text">设置最大输入长度</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10" :value="inputMaxLengthValue" @input="onMaxLengthInput" :focus="inputMaxLengthFocus" />
</view>
</view>
......@@ -74,16 +74,16 @@
<view class="uni-title">
<text class="uni-title-text">设置光标与键盘的距离</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input class="uni-input" :cursor-spacing="1000" placeholder="光标与键盘的距离为1000px" />
</view>
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">自动获取焦点</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-focus" class="uni-input" :focus="focus" @keyboardheightchange="inputFocusKeyBoardChange"/>
</view>
</view>
......@@ -92,19 +92,19 @@
<view class="uni-title">
<text class="uni-title-text">confirm-type取值（不同输入法表现可能不一致）</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-confirm-send" class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-confirm-search" class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-confirm-next" class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" />
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-confirm-go" class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" />
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input id="uni-input-confirm-done" class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" />
</view>
</view>
......@@ -113,7 +113,7 @@
<view class="uni-title">
<text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input class="uni-input" :confirm-hold="true" />
</view>
</view>
......@@ -122,7 +122,7 @@
<view class="uni-title" @click="setCursor(4)">
<text class="uni-title-text">设置输入框聚焦时光标的位置（点击生效）</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input ref="input" class="uni-input" value="0123456789" :cursor="cursor" />
</view>
</view>
......@@ -131,25 +131,25 @@
<view class="uni-title" @click="setSelection(0, 4)">
<text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart" :selection-end="selectionEnd" />
</view>
</view>
<view>
<view class="uni-title" @click="changeCursorColor">
<text class="uni-title-text">设置光标颜色为透明（点击本行文字生效，再点复位）</text>
</view>
<view class="uni-input-wrapper">
<input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" value="光标颜色" />
</view>
</view>
<view>
<view class="uni-title" @click="changeCursorColor">
<text class="uni-title-text">设置光标颜色为透明（点击本行文字生效，再点复位）</text>
</view>
<view class="input-wrapper">
<input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" value="光标颜色" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">键盘弹起时，自动上推页面</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input class="uni-input" :adjust-position="true" />
</view>
</view>
......@@ -159,7 +159,7 @@
<text class="uni-title-text">input事件</text>
<text class="uni-subtitle-text" v-if="inputEventDetail">{{inputEventDetail}}</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input class="uni-input" @input="onInput" />
</view>
</view>
......@@ -169,7 +169,7 @@
<text class="uni-title-text">focus事件和blur事件</text>
<text class="uni-subtitle-text" v-if="focusAndBlurEventDetail">{{focusAndBlurEventDetail}}</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input class="uni-input" @focus="onFocus" @blur="onBlur" />
</view>
</view>
......@@ -179,7 +179,7 @@
<text class="uni-title-text">confirm事件</text>
<text class="uni-subtitle-text" v-if="confirmEventDetail">{{confirmEventDetail}}</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input class="uni-input" @confirm="onConfirm" />
</view>
</view>
......@@ -189,7 +189,7 @@
<text class="uni-title-text">keyboardheightchange事件</text>
<text class="uni-subtitle-text" v-if="keyboardHeightChangeEventDetail">{{keyboardHeightChangeEventDetail}}</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" />
</view>
</view>
......@@ -198,7 +198,7 @@
<view class="uni-title">
<text class="uni-title-text">带清除按钮的输入框</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
<image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image>
......@@ -209,7 +209,7 @@
<view class="uni-title">
<text class="uni-title-text">可查看密码的输入框</text>
</view>
<view class="uni-input-wrapper">
<view class="input-wrapper">
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
<image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'" @click="changePassword"></image>
</view>
......@@ -227,7 +227,7 @@
showClearIcon: false,
inputClearValue: '',
showPassword: true,
cursor: -1,
cursor: -1,
cursor_color: "#3393E2",
selectionStart: -1,
selectionEnd: -1,
......@@ -239,27 +239,27 @@
inputPassword: true,
inputTypeTel: "tel",
inputPlaceHolderStyle: "color:red",
inputPlaceHolderClass: "uni-input-placeholder-class",
inputMaxLengthValue:"",
onMaxLengthInputValue:"",
inputMaxLengthFocus:false,
inputPasswordValue:"",
inputPlaceHolderClass: "uni-input-placeholder-class",
inputMaxLengthValue:"",
onMaxLengthInputValue:"",
inputMaxLengthFocus:false,
inputPasswordValue:"",
inputFocusKeyBoardChangeValue:true
}
},
methods: {
inputFocusKeyBoardChange(e:InputKeyboardHeightChangeEvent) {
this.inputFocusKeyBoardChangeValue = e.detail.height > 50
},
onMaxLengthInput(event:InputEvent) {
this.onMaxLengthInputValue = event.detail.value
methods: {
inputFocusKeyBoardChange(e:InputKeyboardHeightChangeEvent) {
this.inputFocusKeyBoardChangeValue = e.detail.height > 50
},
onMaxLengthInput(event:InputEvent) {
this.onMaxLengthInputValue = event.detail.value
},
setCursor: function (cursor : number) {
(this.$refs['input'] as Element).focus();
(this.$refs['input'] as UniElement).focus();
this.cursor = cursor;
},
setSelection: function (selectionStart : number, selectionEnd : number) {
(this.$refs['input2'] as Element).focus();
(this.$refs['input2'] as UniElement).focus();
this.selectionStart = selectionStart;
this.selectionEnd = selectionEnd;
},
......@@ -297,23 +297,23 @@
onKeyborardHeightChange: function (event : InputKeyboardHeightChangeEvent) {
console.log("键盘高度发生变化", JSON.stringify(event.detail));
this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);
},
test_check_input_value():number {
return this.onMaxLengthInputValue.length
},
changeCursorColor(){
if(this.cursor_color == "#3393E2"){
this.cursor_color = "transparent"
}else{
this.cursor_color = "#3393E2"
}
},
test_check_input_value():number {
return this.onMaxLengthInputValue.length
},
changeCursorColor(){
if(this.cursor_color == "#3393E2"){
this.cursor_color = "transparent"
}else{
this.cursor_color = "#3393E2"
}
}
}
}
</script>
<style scoped>
.uni-input-wrapper {
.input-wrapper {
display: flex;
padding: 8px 13px;
margin: 10rpx 0;
......@@ -337,8 +337,8 @@
.uni-input-placeholder-class {
background-color: green;
}
.uni-input-placeholder-class-ts {
background-color: orange;
}
</style>
.uni-input-placeholder-class-ts {
background-color: orange;
}
</style>
pages/component/list-view/list-view.uvue
浏览文件 @ 5cc644b3
......@@ -92,7 +92,7 @@
item_change_size_enum(index : number) { this.scrollIntoView = "item---"+index },
//自动化测试例专用
check_scroll_height(): Boolean {
var listElement = this.$refs["listview"] as Element
var listElement = this.$refs["listview"] as UniElement
console.log("check_scroll_height--"+listElement.scrollHeight)
if(listElement.scrollHeight > 2000) {
return true
......@@ -101,7 +101,7 @@
},
//自动化测试例专用
check_scroll_width(): Boolean {
var listElement = this.$refs["listview"] as Element
var listElement = this.$refs["listview"] as UniElement
console.log("check_scroll_width"+listElement.scrollWidth)
if(listElement.scrollWidth > 2000) {
return true
......
pages/component/mixin-datacom/mixin-datacom.test.js
浏览文件 @ 5cc644b3
const PAGE_PATH = '/pages/component/mixin-datacom/mixin-datacom'
describe('mixin-datacom', () => {
if (process.env.uniTestPlatformInfo.startsWith('web')) {
it('dummyTest', async () => {
expect(1).toBe(1)
})
return
}
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
......
pages/component/picker-view/picker-view.test.js
浏览文件 @ 5cc644b3
......@@ -16,14 +16,14 @@ describe('PickerView.uvue', () => {
const el = await page.$('.picker-view')
await page.callMethod('setValue')
await page.waitFor(1000)
expect(await el.property('value')).toEqual([0, 0, 0])
expect(await el.attribute('value')).toEqual([0, 0, 0])
if (process.env.UNI_PLATFORM === 'app-android') {
expect(await getData('result')).toEqual([0, 0, 0])
}
await page.callMethod('setValue1')
await page.waitFor(1000)
expect(await el.property('value')).toEqual([10, 10, 10])
expect(await el.attribute('value')).toEqual([10, 10, 10])
if (process.env.UNI_PLATFORM === 'app-android') {
expect(await getData('result')).toEqual([10, 10, 10])
}
......@@ -39,22 +39,22 @@ describe('PickerView.uvue', () => {
const el = await page.$('.picker-view')
await page.setData({
indicatorStyle: 'height: 100px;',
})
})
await page.waitFor(500)
expect(await el.property('indicatorStyle')).toBe('height: 100px;')
expect(await el.attribute('indicatorStyle')).toBe('height: 100px;')
})
it('mask-top-style', async () => {
const el = await page.$('.picker-view')
await page.setData({
maskTopStyle: 'background: #ffffff;',
})
expect(await el.property('mask-top-style')).toBe('background: #ffffff;')
expect(await el.attribute('mask-top-style')).toBe('background: #ffffff;')
})
it('mask-bottom-style', async () => {
const el = await page.$('.picker-view')
await page.setData({
maskBottomStyle: 'background: #ffffff;',
})
expect(await el.property('mask-bottom-style')).toBe('background: #ffffff;')
expect(await el.attribute('mask-bottom-style')).toBe('background: #ffffff;')
})
})
pages/component/progress/progress.test.js
浏览文件 @ 5cc644b3
......@@ -16,22 +16,22 @@ describe('Progress.uvue', () => {
await page.callMethod('setProgress')
await page.waitFor(1000);
const p = await page.$('.p')
expect(await p.property('percent')).toEqual(20)
expect(await p.attribute('percent')).toEqual(20)
const p1 = await page.$('.p1')
expect(await p1.property('percent')).toEqual(40)
expect(await p1.attribute('percent')).toEqual(40)
const p2 = await page.$('.p2')
expect(await p2.property('percent')).toEqual(60)
expect(await p2.attribute('percent')).toEqual(60)
const p3 = await page.$('.p3')
expect(await p3.property('percent')).toEqual(80)
expect(await p3.attribute('percent')).toEqual(80)
if (process.env.UNI_PLATFORM === 'app-android') {
expect(await getData('curPercent')).toEqual(20)
}
await page.callMethod('clearProgress')
await page.waitFor(1000)
expect(await p.property('percent')).toEqual(0)
expect(await p1.property('percent')).toEqual(0)
expect(await p2.property('percent')).toEqual(0)
expect(await p3.property('percent')).toEqual(0)
expect(await p.attribute('percent')).toEqual(0)
expect(await p1.attribute('percent')).toEqual(0)
expect(await p2.attribute('percent')).toEqual(0)
expect(await p3.attribute('percent')).toEqual(0)
if (process.env.UNI_PLATFORM === 'app-android') {
expect(await getData('curPercent')).toEqual(0)
}
......@@ -42,42 +42,42 @@ describe('Progress.uvue', () => {
})
it('show-info', async () => {
const el = await page.$('.p')
expect(await el.property('show-info')).toEqual(true)
expect(await el.attribute('show-info')).toEqual(true)
await page.setData({
showInfo: false
})
expect(await el.property('show-info')).toEqual(false)
expect(await el.attribute('show-info')).toEqual(false)
})
it('border-radius', async () => {
const el = await page.$('.p')
expect(await el.property('border-radius')).toEqual(0)
expect(await el.attribute('border-radius')).toEqual(0)
await page.setData({
borderRadius: 5
})
expect(await el.property('border-radius')).toEqual(5)
expect(await el.attribute('border-radius')).toEqual(5)
})
it('font-size', async () => {
const el = await page.$('.p')
expect(await el.property('font-size')).toEqual(16)
expect(await el.attribute('font-size')).toEqual(16)
await page.setData({
fontSize: 18
})
expect(await el.property('font-size')).toEqual(18)
expect(await el.attribute('font-size')).toEqual(18)
})
it('stroke-width', async () => {
const el = await page.$('.p')
expect(await el.property('stroke-width')).toEqual(3)
expect(await el.attribute('stroke-width')).toEqual(3)
await page.setData({
strokeWidth: 6
})
expect(await el.property('stroke-width')).toEqual(6)
expect(await el.attribute('stroke-width')).toEqual(6)
})
it('backgroundColor', async () => {
const el = await page.$('.p')
expect(await el.property('background-color')).toEqual('#EBEBEB')
expect(await el.attribute('background-color')).toEqual('#EBEBEB')
await page.setData({
backgroundColor: "#007aff"
})
expect(await el.property('background-color')).toEqual('#007aff')
expect(await el.attribute('background-color')).toEqual('#007aff')
})
})
\ No newline at end of file
pages/component/radio/radio.test.js
浏览文件 @ 5cc644b3
......@@ -40,26 +40,26 @@ describe('Radio.uvue', () => {
})
it('checked', async () => {
const radio = await page.$('.r')
expect(await radio.property('checked')).toBe(true)
expect(await radio.attribute('checked')).toBe(true)
await page.setData({
checked: false,
})
expect(await radio.property('checked')).toBe(false)
expect(await radio.attribute('checked')).toBe(false)
})
it('color', async () => {
const radio = await page.$('.r')
expect(await radio.property('color')).toBe('#007aff')
expect(await radio.attribute('color')).toBe('#007aff')
await page.setData({
color: '#63acfc',
})
expect(await radio.property('color')).toBe('#63acfc')
expect(await radio.attribute('color')).toBe('#63acfc')
})
it('disabled', async () => {
const radio = await page.$('.r2')
expect(await radio.property('disabled')).toBe(true)
expect(await radio.attribute('disabled')).toBe(true)
await page.setData({
disabled: false,
})
expect(await radio.property('disabled')).toBe(false)
expect(await radio.attribute('disabled')).toBe(false)
})
})
pages/component/scroll-view/scroll-view-props.uvue
浏览文件 @ 5cc644b3
......@@ -5,7 +5,7 @@
<!-- 暂时分成两个方向不同的滚动视图，原因为：scroll-x或scroll-y属性一经设置不能动态改变。 -->
<scroll-view v-if="scrollX" :scroll-x="true" :scroll-y="false" :scroll-top="scrollTop" :scroll-left="scrollLeft"
:upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView"
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation" style="flex-direction: row;"
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation" style="flex-direction: row;width: 100%;height: 100%;"
:show-scrollbar="showScrollbar" :rebound="rebound" @scrolltoupper="scrolltoupper"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewX" id="scrollViewX">
<view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items">
......@@ -15,9 +15,9 @@
<scroll-view v-else :scroll-y="scrollY" :scroll-top="scrollTop" :scroll-left="scrollLeft"
:upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView"
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
:show-scrollbar="showScrollbar" :rebound="rebound" @scrolltoupper="scrolltoupper"
:show-scrollbar="showScrollbar" :rebound="rebound" @scrolltoupper="scrolltoupper"
@touchmove="onTouchMove"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY">
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY" style="width: 100%;height: 100%;">
<view class="item" :id="item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text>
</view>
......@@ -40,10 +40,10 @@
<view class="uni-option">
<text>是否横向滚动</text>
<switch :checked="scrollX" @change="changeDirectionX"></switch>
</view>
<view class="uni-option">
<text>是否竖向滚动</text>
<switch :checked="scrollY" @change="changeDirectionY"></switch>
</view>
<view class="uni-option">
<text>是否竖向滚动</text>
<switch :checked="scrollY" @change="changeDirectionY"></switch>
</view>
<view class="uni-common-pb"></view>
<view class="uni-slider">
......@@ -91,7 +91,7 @@
data() {
return {
items: [] as Item[],
scrollX: false,
scrollX: false,
scrollY: true,
rebound: false,
scrollTop: 0,
......@@ -122,20 +122,20 @@
this.scrollTop = e.detail.value;
},
changeDirectionX() {
this.scrollX = !this.scrollX;
if(this.scrollX) {
this.scrollY = false
this.scrollX = !this.scrollX;
if(this.scrollX) {
this.scrollY = false
}
this.scrollTop = 0;
this.scrollLeft = 0;
},
changeDirectionY() {
this.scrollY = !this.scrollY;
if(this.scrollY) {
this.scrollX = false
}
this.scrollTop = 0;
this.scrollLeft = 0;
},
changeDirectionY() {
this.scrollY = !this.scrollY;
if(this.scrollY) {
this.scrollX = false
}
this.scrollTop = 0;
this.scrollLeft = 0;
},
handleScrollIntoView() {
if (this.scrollX) {
......@@ -176,33 +176,33 @@
},
scrollend() {
console.log("滚动停止");
},
onTouchMove() {
console.log("TouchMove");
},
//自动化测试专用
checkScrollHeight(): Boolean {
var element = this.$refs["scrollViewY"]
if(element != null) {
var scrollHeight = (element as Element).scrollHeight
console.log("checkScrollHeight"+scrollHeight)
if(scrollHeight > 1900) {
return true
}
}
return false
},
//自动化测试专用
checkScrollWidth(): Boolean {
var element = this.$refs["scrollViewX"]
if(element != null) {
var scrollWidth = (element as Element).scrollWidth
console.log("checkScrollWidth---"+scrollWidth)
if(scrollWidth > 1900) {
return true
}
}
return false
},
onTouchMove() {
console.log("TouchMove");
},
//自动化测试专用
checkScrollHeight(): Boolean {
var element = this.$refs["scrollViewY"]
if(element != null) {
var scrollHeight = (element as UniElement).scrollHeight
console.log("checkScrollHeight"+scrollHeight)
if(scrollHeight > 1900) {
return true
}
}
return false
},
//自动化测试专用
checkScrollWidth(): Boolean {
var element = this.$refs["scrollViewX"]
if(element != null) {
var scrollWidth = (element as UniElement).scrollWidth
console.log("checkScrollWidth---"+scrollWidth)
if(scrollWidth > 1900) {
return true
}
}
return false
}
}
}
......@@ -221,7 +221,7 @@
height: 400rpx;
width: 100%;
background-color: azure;
border-width: 2rpx;
border-width: 2rpx;
border-style: solid;
border-color: chocolate;
}
......@@ -249,4 +249,4 @@
padding: 30rpx;
justify-content: center;
}
</style>
</style>
pages/component/scroll-view/scroll-view-refresher-props.uvue
浏览文件 @ 5cc644b3
......@@ -2,11 +2,11 @@
<view style="flex:1;">
<page-head title="下拉刷新的scroll-view属性示例"></page-head>
<view class="uni-margin-wrap">
<scroll-view :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
<scroll-view scroll-y="true" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
@refresherabort="refresherabort">
@refresherabort="refresherabort" style="width: 100%;height: 100%;">
<view class="item" :id="item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text>
</view>
......
pages/component/slider-100/slider-100.test.js
浏览文件 @ 5cc644b3
......@@ -15,12 +15,12 @@ describe('slider', () => {
// TODO 暂时仅获取第一个
const slider1 = await page.$('.slider')
expect(await slider1.property('value')).toBe(sliderValue)
expect(await slider1.attribute('value')).toBe(sliderValue)
// const slider100 = await page.$$('.slider')
// for (let i = 0; i < slider100.length; i++) {
// const slider = slider100[i];
// expect(await slider.property('value')).toBe(sliderValue)
// expect(await slider.attribute('value')).toBe(sliderValue)
// }
})
})
pages/component/slider-100/slider-100.uvue
浏览文件 @ 5cc644b3
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="flex-row">
<view class="flex-fill">
......@@ -21,9 +19,7 @@
@change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
......
pages/component/slider/slider.test.js
浏览文件 @ 5cc644b3
......@@ -15,13 +15,13 @@ describe('slider', () => {
sliderValue: sliderValue,
})
await page.waitFor(100)
expect(await slider.property('value')).toBe(sliderValue)
expect(await slider.attribute('value')).toBe(sliderValue)
})
it('color', async () => {
const slider = await page.$('.slider-custom-color-and-size')
expect(await slider.property('backgroundColor')).toBe('#000000')
expect(await slider.property('activeColor')).toBe('#FFCC33')
expect(await slider.property('blockColor')).toBe('#8A6DE9')
expect(await slider.attribute('backgroundColor')).toBe('#000000')
expect(await slider.attribute('activeColor')).toBe('#FFCC33')
expect(await slider.attribute('blockColor')).toBe('#8A6DE9')
const backgroundColor = '#008000'
const activeColor = '#00FF00'
......@@ -33,19 +33,19 @@ describe('slider', () => {
sliderBlockColor: blockColor,
})
await page.waitFor(100)
expect(await slider.property('backgroundColor')).toBe(backgroundColor)
expect(await slider.property('activeColor')).toBe(activeColor)
expect(await slider.property('blockColor')).toBe(blockColor)
expect(await slider.attribute('backgroundColor')).toBe(backgroundColor)
expect(await slider.attribute('activeColor')).toBe(activeColor)
expect(await slider.attribute('blockColor')).toBe(blockColor)
})
it('block-size', async () => {
const slider = await page.$('.slider-custom-color-and-size')
expect(await slider.property('blockSize')).toBe(20)
expect(await slider.attribute('blockSize')).toBe(20)
const blockSize = 18
await page.setData({
sliderBlockSize: blockSize,
})
await page.waitFor(100)
expect(await slider.property('blockSize')).toBe(blockSize)
expect(await slider.attribute('blockSize')).toBe(blockSize)
})
})
\ No newline at end of file
pages/component/sticky-section/sticky-section.uvue
浏览文件 @ 5cc644b3
<template>
<template>
<page-head title="sticky-section"></page-head>
<list-view id="list-view" ref="list-view" show-scrollbar=false class="page" :scroll-into-view="scrollIntoView"
@scroll="onScroll" @scrollend="onScrollEnd" rebound="false">
<list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type = 20>
<button @click="gotoStickyHeader('C')" size="mini">跳转到id为C的sticky-header位置上</button>
<list-view id="list-view" ref="list-view" show-scrollbar=false class="page" :scroll-into-view="scrollIntoView"
@scroll="onScroll" @scrollend="onScrollEnd" rebound="false">
<list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type = 20>
<button @click="gotoStickyHeader('C')" size="mini">跳转到id为C的sticky-header位置上</button>
</list-item>
<sticky-section v-for="(sectionText) in data" :padding="sectionPadding" :push-pinned-header="true">
<sticky-header :header-id="sectionText" :id="sectionText">
......@@ -13,7 +13,7 @@
<text class="text">{{sectionText}}--item--content----{{i}}</text>
</list-item>
</sticky-section>
<list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type= 30>
<list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type= 30>
<!-- <text style="color: #aaa">到底了</text> -->
<button @click="toTop" size="mini">回到顶部</button>
</list-item>
......@@ -25,33 +25,33 @@
data() {
return {
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
sectionPadding: [0, 10, 0, 10] as Array<number>,
scrollIntoView: "",
sectionPadding: [0, 10, 0, 10] as Array<number>,
scrollIntoView: "",
scrolling: false
}
},
methods: {
toTop(){
this.scrollIntoView = ""
uni.getElementById("list-view")!.scrollTop = 0
methods: {
toTop(){
this.scrollIntoView = ""
uni.getElementById("list-view")!.scrollTop = 0
},
//用于自动化测试
listViewScrollByY(y : number) {
const listview = this.$refs["list-view"] as Element
const listview = this.$refs["list-view"] as UniElement
listview.scrollBy(0, y)
},
gotoStickyHeader(id : string) {
this.scrollIntoView = id
},
onScroll() {
this.scrolling = true
},
onScrollEnd() {
this.scrolling = false
//滚动后重置scrollIntoView = ""
if(this.scrollIntoView != "") {
this.scrollIntoView = ""
}
},
gotoStickyHeader(id : string) {
this.scrollIntoView = id
},
onScroll() {
this.scrolling = true
},
onScrollEnd() {
this.scrolling = false
//滚动后重置scrollIntoView = ""
if(this.scrollIntoView != "") {
this.scrollIntoView = ""
}
}
}
}
......@@ -75,4 +75,4 @@
margin: 5px 0;
background-color: #fff;
}
</style>
</style>
pages/component/swiper/swiper.test.js
浏览文件 @ 5cc644b3
......@@ -39,7 +39,7 @@ describe('test swiper', () => {
expect(await getData('currentValChange')).toEqual(1)
await page.waitFor(5000)
expect(await getData('currentValChange')).toEqual(2)
await page.waitFor(300)
await page.setData({
circularSelect: true
})
......@@ -50,6 +50,7 @@ describe('test swiper', () => {
circularSelect: false,
autoplaySelect: false
})
await page.waitFor(300)
});
......
pages/component/swiper/swiper.uvue
浏览文件 @ 5cc644b3
......@@ -198,7 +198,6 @@
.uni-margin-wrap {
width: 690rpx;
width: 100%;
;
}
.swiper {
......
pages/component/switch/switch.test.js
浏览文件 @ 5cc644b3
......@@ -29,17 +29,17 @@ describe('switch', () => {
checked: false,
})
await page.waitFor(100)
expect(await switch_element.property('checked')).toBe(false)
expect(await switch_element.attribute('checked')).toBe(false)
await page.setData({
checked: true,
})
await page.waitFor(100)
expect(await switch_element.property('checked')).toBe(true)
expect(await switch_element.attribute('checked')).toBe(true)
})
it('color', async () => {
const switch_element = await page.$('.switch-color')
expect(await switch_element.property('color')).toBe('#FFCC33')
expect(await switch_element.attribute('color')).toBe('#FFCC33')
const color = '#00ff00'
......@@ -47,6 +47,6 @@ describe('switch', () => {
color: color
})
await page.waitFor(100)
expect(await switch_element.property('color')).toBe(color)
expect(await switch_element.attribute('color')).toBe(color)
})
})
\ No newline at end of file
pages/component/textarea/textarea.test.js
浏览文件 @ 5cc644b3
......@@ -12,12 +12,12 @@ describe('component-native-textarea', () => {
});
it('focus', async () => {
expect(await textarea.property("focus")).toBe("false")
expect(await textarea.attribute("focus")).toBe("false")
await page.setData({
focus_boolean: true,
})
await page.waitFor(500)
expect(await textarea.property("focus")).toBe("true")
expect(await textarea.attribute("focus")).toBe("true")
});
/* it("auto-height", async () => {
await page.setData({
......@@ -66,7 +66,7 @@ describe('component-native-textarea', () => {
cursor_color: "transparent",
})
await page.waitFor(500)
expect(await textarea.property("cursor-color")).toBe("transparent")
expect(await textarea.attribute("cursor-color")).toBe("transparent")
})
it("inputmode", async () => {
......@@ -76,7 +76,7 @@ describe('component-native-textarea', () => {
console.log(x['value'], x['name'])
await page.callMethod("radio_change_inputmode_enum", x['value']);
await page.waitFor(500)
expect(await textarea.property("inputmode")).toEqual(x['name'])
expect(await textarea.attribute("inputmode")).toEqual(x['name'])
await page.waitFor(500)
}
})
......
pages/component/video/video-format.uvue
浏览文件 @ 5cc644b3
......@@ -27,6 +27,7 @@
return {
title: 'video-format',
supportFormats: [
// TODO web本地运行时本地服务返回的content-type不对，导致本地视频无法播放。此外web端原生video不支持flv、m3u8、avi格式，但是和app端相比多了ogg格式的支持
{
format: 'mp4',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4'
......@@ -47,6 +48,7 @@
format: '3gp',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.3gp'
},
// #ifndef WEB
{
format: 'flv',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.flv'
......@@ -59,16 +61,19 @@
format: '本地m3u8',
src: '/static/test-video/2minute-demo.m3u8'
},
// #endif
{
format: '错误路径',
src: 'https://www.dcloud.net.cn/errorpath.mp4'
},
] as Array<VideoFormat>,
notSupportFormats: [
// #ifndef WEB
{
format: 'ogg',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.ogg'
},
// #endif
{
format: 'avi',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.avi'
......@@ -79,7 +84,7 @@
},
methods: {
onError: function (format: string, e : VideoErrorEvent) {
console.log(format + ":" + e.detail);
console.log(format + ":" + JSON.stringify(e));
if (format != "错误路径") {
this.isError = true;
}
......
pages/component/video/video.test.js
浏览文件 @ 5cc644b3
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
jest.setTimeout(10000);
jest.setTimeout(20000);
describe('component-native-video', () => {
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/component/video/video');
await page.waitFor('video');
await page.waitFor(300)
});
it('test API', async () => {
......
pages/component/video/video.uvue
浏览文件 @ 5cc644b3
......@@ -220,6 +220,11 @@
isFullScreen: false
}
},
onLoad() {
// #ifdef WEB
this.muted = true // web端非静音视频不可自动播放
// #endif
},
methods: {
// API
play: function () {
......@@ -228,7 +233,7 @@
},
pause: function () {
console.log("pause");
(uni.getElementById("video") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
(uni.getElementById("video") as unknown as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
// this.videoContext?.pause();
},
seek: function (pos : number) {
......
pages/component/web-view/web-view.uvue
浏览文件 @ 5cc644b3
......@@ -37,7 +37,10 @@
}
},
onReady() {
// #ifdef APP
// TODO web 实现createWebviewContext
this.webviewContext = uni.createWebviewContext('web-view', this)
// #endif
},
methods: {
back() {
......
pages/tabBar/API.uvue
浏览文件 @ 5cc644b3
......@@ -63,9 +63,13 @@
name: 'getApp',
url: 'get-app',
},
{
name: 'getCurrentPages',
url: 'get-current-pages',
{
name: 'getCurrentPages',
url: 'get-current-pages',
},
{
name: 'globalProperties',
url: 'globalProperties',
}
] as Page[],
},
......@@ -77,11 +81,11 @@
name: '事件总线event-bus',
url: 'event-bus',
api: ["$on", "$once", "$off", "$emit"]
},
{
name: '拦截器',
url: 'interceptor',
api: ["addInterceptor", "removeInterceptor"]
},
{
name: '拦截器',
url: 'interceptor',
api: ["addInterceptor", "removeInterceptor"]
},
{
name: '获取启动参数',
......@@ -145,20 +149,20 @@
name: "节点布局交互状态",
url: "intersection-observer",
enable: false
}, */
}, */
{
name: 'element元素',
url: 'get-element-by-id',
api: ["getElementById"],
},
{
name: 'element draw',
url: 'element-draw',
api: ["Element.getDrawableContext"]
},{
name: 'element截图',
url: 'element-takesnapshot',
api: ["Element.takeSnapshot"]
api: ["getElementById"],
},
{
name: 'element draw',
url: 'element-draw',
api: ["UniElement.getDrawableContext"]
},{
name: 'element截图',
url: 'element-takesnapshot',
api: ["UniElement.takeSnapshot"]
},
{
name: 'node节点',
......@@ -188,38 +192,38 @@
api: ["showToast"]
}
] as Page[],
},
{
id: 'network',
name: '网络',
pages: [
{
name: '发起请求request',
url: 'request',
},
{
name: '上传文件',
url: 'upload-file',
},
{
name: '下载文件',
url: 'download-file',
},
{
name: '获取设备网络状态',
url: 'get-network-type',
},
{
name: 'socketTask',
url: 'websocket-socketTask',
api: [""] //它不是uni.的api
},
{
name: '全局websocket',
url: 'websocket-global',
api: ["connectSocket", "onSocketOpen", "onSocketError", "sendSocketMessage", "onSocketMessage", "closeSocket", "onSocketClose"]
},
] as Page[],
},
{
id: 'network',
name: '网络',
pages: [
{
name: '发起请求request',
url: 'request',
},
{
name: '上传文件',
url: 'upload-file',
},
{
name: '下载文件',
url: 'download-file',
},
{
name: '获取设备网络状态',
url: 'get-network-type',
},
{
name: 'socketTask',
url: 'websocket-socketTask',
api: [""] //它不是uni.的api
},
{
name: '全局websocket',
url: 'websocket-global',
api: ["connectSocket", "onSocketOpen", "onSocketError", "sendSocketMessage", "onSocketMessage", "closeSocket", "onSocketClose"]
},
] as Page[],
},
{
id: 'device',
......@@ -252,10 +256,10 @@
{
name: '电量',
url: 'get-battery-info',
},
{
name: '安装Apk',
url: 'install-apk'
},
{
name: '安装Apk',
url: 'install-apk'
}
/* {
name: "打电话",
......@@ -314,10 +318,10 @@
{
id: 'media',
name: '媒体',
pages: [
{
name: "拍照和相册选择",
url: 'choose-image'
pages: [
{
name: "拍照和相册选择",
url: 'choose-image'
},
{
name: '图片预览',
......@@ -393,55 +397,55 @@
name: 'storage（key-value存储）',
url: 'storage',
api: ["getStorageInfo", "getStorageInfoSync", "getStorage", "getStorageSync", "setStorage", "setStorageSync", "removeStorage", "removeStorageSync", "clearStorage", "clearStorageSync"]
}
}
] as Page[],
},{
id: 'file',
name: '文件',
pages: [
{
name: 'fileSystemManager文件管理',
url: 'get-file-system-manager'
{
name: 'fileSystemManager文件管理',
url: 'get-file-system-manager'
},
] as Page[],
},
{
id: 'unicloud',
name: 'uniCloud',
pages: [
{
name: '云函数',
url: 'unicloud-call-function',
},
{
name: '云对象',
url: 'unicloud-import-object',
},
{
name: '云存储',
url: 'unicloud-file-api',
},
{
name: 'clientDB',
url: 'unicloud-database',
},
] as Page[],
},
// #ifdef APP
{
id: 'login',
name: '登录与认证',
pages: [
{
name: '一键登录',
url: 'get-univerify-manager',
},
{
name: '实人认证',
url: 'facial-recognition-verify',
}
] as Page[],
},
{
id: 'unicloud',
name: 'uniCloud',
pages: [
{
name: '云函数',
url: 'unicloud-call-function',
},
{
name: '云对象',
url: 'unicloud-import-object',
},
{
name: '云存储',
url: 'unicloud-file-api',
},
{
name: 'clientDB',
url: 'unicloud-database',
},
] as Page[],
},
// #ifdef APP
{
id: 'login',
name: '登录与认证',
pages: [
{
name: '一键登录',
url: 'get-univerify-manager',
},
{
name: '实人认证',
url: 'facial-recognition-verify',
}
] as Page[],
},
},
// #endif
/* {
id: "rewarded-video-ad",
......@@ -518,10 +522,10 @@
})
},
showPop: function () {
(this.$refs["pop"] as Element).style.setProperty("display", "flex")
(this.$refs["pop"] as UniElement).style.setProperty("display", "flex")
},
hidePop: function () {
(this.$refs["pop"] as Element).style.setProperty("display", "none")
(this.$refs["pop"] as UniElement).style.setProperty("display", "none")
},
stopClickPop: function (e : MouseEvent) {
e.stopPropagation() //点击到pop的非灰色区域，拦截点击事件
......@@ -536,4 +540,4 @@
.item {
margin-bottom: 12px;
}
</style>
</style>
pages/tabBar/component.uvue
浏览文件 @ 5cc644b3
......@@ -93,9 +93,12 @@ export default {
enable: false
},
*/
// #ifdef APP
// TODO web 实现list-view
{
name: 'list-view',
},
// #endif
{
name: 'sticky-header',
},
......
pages/template/calendar/calendar.uvue
浏览文件 @ 5cc644b3
......@@ -70,7 +70,7 @@ export default {
// 触发整个日历的点击事件，需要计算点击位置
select (event: TouchEvent) {
const refs = this.$refs['draw-weeks'] as Element
const refs = this.$refs['draw-weeks'] as UniElement
const rect = refs.getBoundingClientRect();
const dom_x = rect.left; // 元素左上角相对于视口的 X 坐标
const dom_y = rect.top; // 元素左上角相对于视口的 Y 坐标
......@@ -144,7 +144,7 @@ export default {
// 绘制日历顶部信息
drawHeader () {
const refs = this.$refs['draw-header'] as Element
const refs = this.$refs['draw-header'] as UniElement
let ctx = refs.getDrawableContext()
if (ctx == null) return
const date_header_map = ['一', '二', '三', '四', '五', '六', '日']
......@@ -172,7 +172,7 @@ export default {
// 绘制日历主体
drawWeek (weeks: Array<Array<DateType>>, time: string) {
const start_time = Date.now()
const refs = this.$refs['draw-weeks'] as Element
const refs = this.$refs['draw-weeks'] as UniElement
let ctx = refs.getDrawableContext()
if (ctx == null) return
const dom = refs.getBoundingClientRect()
......
pages/template/custom-tab-bar/custom-tab-bar-tab1.uvue
浏览文件 @ 5cc644b3
......@@ -35,7 +35,7 @@
uni.$emit('tabchange', e.detail.scrollTop)
},
scrollTop(top : number) {
(this.$refs["listView"] as Element).scrollTop = top
(this.$refs["listView"] as UniElement).scrollTop = top
}
}
}
......
pages/template/custom-tab-bar/custom-tab-bar.uvue
浏览文件 @ 5cc644b3
......@@ -73,7 +73,7 @@
},
onReady() {
this.setSelectedIndex(0)
this.$tabViewHeight = (this.$refs["tabview"] as Element).getBoundingClientRect().height
this.$tabViewHeight = (this.$refs["tabview"] as UniElement).getBoundingClientRect().height
},
onUnload() {
uni.$off('tabchange', this.onTabPageEvent)
......
pages/template/drop-card/card/card.uvue
浏览文件 @ 5cc644b3
......@@ -21,7 +21,7 @@
export default {
data() {
return {
$elementMap: new Map<string, Element>(),
$elementMap: new Map<string, UniElement>(),
x: 0 as number,
y: 0 as number,
// 飘走的卡片计数
......@@ -78,12 +78,12 @@
this.setElementStyle('card', 'margin-top', screenHeight * 0.15 - 30 * _index + 'px');
this.setElementStyle('card', 'transform', 'scale(' + (0.9 + 0.05 * _index) + ')')
},
// 工具方法，用于快速设置 Element 的 style
// 工具方法，用于快速设置 UniElement 的 style
setElementStyle(refName : string, propertyName : string, propertyStyle : any) : void {
const elementMap = this.$data['$elementMap'] as Map<string, Element>
let element : Element | null = elementMap.get(refName)
const elementMap = this.$data['$elementMap'] as Map<string, UniElement>
let element : UniElement | null = elementMap.get(refName)
if (element == null) {
element = this.$refs[refName] as Element;
element = this.$refs[refName] as UniElement;
elementMap.set(refName, element)
} else {
// console.log('直接拿');
......
pages/template/half-screen/half-screen.uvue
浏览文件 @ 5cc644b3
......@@ -28,8 +28,8 @@
lastY: 0, //上次
lastY2: 0, //
bAnimation: false, //是否动画
halfNode: null as Element | null,
scrollNode: null as Element | null
halfNode: null as UniElement | null,
scrollNode: null as UniElement | null
}
},
methods: {
......@@ -190,4 +190,4 @@
.item {
height: 100px;
}
</style>
</style>
pages/template/long-list/long-list.uvue
浏览文件 @ 5cc644b3
......@@ -79,21 +79,21 @@
} as SwiperViewItem
] as SwiperViewItem[],
swiperIndex: -1,
$pageScrollView: null as null | Element,
$pageScrollView: null as null | UniElement,
$headerHeight: 0,
$animationFinishIndex: 0,
$tabScrollView: null as null | Element,
$indicatorNode: null as null | Element,
$tabScrollView: null as null | UniElement,
$indicatorNode: null as null | UniElement,
$swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[]
}
},
onReady() {
this.$pageScrollView = this.$refs['pageScrollView'] as Element;
this.$headerHeight = (this.$refs['header'] as Element).offsetHeight
this.$swiperWidth = (this.$refs['swiper'] as Element).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as Element
this.$indicatorNode = this.$refs['indicator'] as Element
this.$pageScrollView = this.$refs['pageScrollView'] as UniElement;
this.$headerHeight = (this.$refs['header'] as UniElement).offsetHeight
this.$swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as UniElement
this.$indicatorNode = this.$refs['indicator'] as UniElement
this.cacheTabItemsSize()
this.setSwiperIndex(0, true)
},
......@@ -173,7 +173,7 @@
},
cacheTabItemsSize() {
this.$swiperTabsRect.length = 0
const tabs = this.$refs["swipertab"] as Element[]
const tabs = this.$refs["swipertab"] as UniElement[]
tabs.forEach((node) => {
this.$swiperTabsRect.push({
x: node.offsetLeft,
......
pages/template/long-list2/long-list2.uvue
浏览文件 @ 5cc644b3
......@@ -89,22 +89,22 @@
} as SwiperViewItem
] as SwiperViewItem[],
swiperIndex: -1,
$pageScrollView: null as null | Element,
$pageScrollView: null as null | UniElement,
$headerHeight: 0,
$animationFinishIndex: 0,
$tabScrollView: null as null | Element,
$indicatorNode: null as null | Element,
$tabScrollView: null as null | UniElement,
$indicatorNode: null as null | UniElement,
$swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[],
nestedScrollChildId: ""
}
},
onReady() {
this.$pageScrollView = this.$refs['pageScrollView'] as Element;
this.$headerHeight = (this.$refs['header'] as Element).offsetHeight
this.$swiperWidth = (this.$refs['swiper'] as Element).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as Element
this.$indicatorNode = this.$refs['indicator'] as Element
this.$pageScrollView = this.$refs['pageScrollView'] as UniElement;
this.$headerHeight = (this.$refs['header'] as UniElement).offsetHeight
this.$swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as UniElement
this.$indicatorNode = this.$refs['indicator'] as UniElement
this.cacheTabItemsSize()
this.setSwiperIndex(0, true)
},
......@@ -176,7 +176,7 @@
},
cacheTabItemsSize() {
this.$swiperTabsRect.length = 0
const tabs = this.$refs["swipertab"] as Element[]
const tabs = this.$refs["swipertab"] as UniElement[]
tabs.forEach((node) => {
this.$swiperTabsRect.push({
x: node.offsetLeft,
......
pages/template/pull-zoom-image/pull-zoom-image.uvue
浏览文件 @ 5cc644b3
......@@ -36,7 +36,7 @@
export default {
data() {
return {
$elementMap: new Map<string, Element>()
$elementMap: new Map<string, UniElement>()
}
},
methods: {
......@@ -60,12 +60,12 @@
this.setElementStyle("head-img-1", 'transform', `scale(${pullingDistance / 200 + 1})`)
this.setElementStyle("head-img-2", 'transform', `scale(${pullingDistance / 200 + 1})`)
},
// 工具方法，用于快速设置 Element 的 style
// 工具方法，用于快速设置 UniElement 的 style
setElementStyle(refName : string, propertyName : string, propertyStyle : any) : void {
let element : Element | null = (this.$data['$elementMap'] as Map<string, Element>).get(refName)
let element : UniElement | null = (this.$data['$elementMap'] as Map<string, UniElement>).get(refName)
if (element == null) {
element = this.$refs[refName] as Element;
(this.$data['$elementMap'] as Map<string, Element>).set(refName, element)
element = this.$refs[refName] as UniElement;
(this.$data['$elementMap'] as Map<string, UniElement>).set(refName, element)
}
element.style.setProperty(propertyName, propertyStyle);
},
......
pages/template/scroll-fold-nav/scroll-fold-nav.uvue
浏览文件 @ 5cc644b3
......@@ -41,17 +41,17 @@
statusBarHeight: 35,
scrollTop: 0,
searchWidth: 700,
searchNode: null as Element | null,
boxNode: null as Element | null,
navNode: null as Element | null
searchNode: null as UniElement | null,
boxNode: null as UniElement | null,
navNode: null as UniElement | null
}
},
onLoad() { },
onReady() {
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight ?? 35;
this.searchNode = this.$refs['search'] as Element;
this.boxNode = this.$refs['top-box'] as Element;
this.navNode = this.$refs['scroll-fold-nav'] as Element;
this.searchNode = this.$refs['search'] as UniElement;
this.boxNode = this.$refs['top-box'] as UniElement;
this.navNode = this.$refs['scroll-fold-nav'] as UniElement;
},
methods: {
onScroll(e : ScrollEvent) {
......@@ -194,4 +194,4 @@
padding: 5px 8px;
border-radius: 100px;
}
</style>
</style>
pages/template/scroll-sticky/scroll-sticky.uvue
浏览文件 @ 5cc644b3
......@@ -34,7 +34,7 @@
stickyTop: 0,
stickyTran: 0,
scrollTop: 0,
stickyNode: null as Element | null
stickyNode: null as UniElement | null
}
},
methods: {
......@@ -67,11 +67,11 @@
onLoad() {
},
onReady() {
this.stickyNode = this.$refs['sticky'] as Element;
this.stickyNode = this.$refs['sticky'] as UniElement;
// let rect = this.stickyNode?.getBoundingClientRect();
// this.stickyTop = rect?.top;
//this.stickyTop = this.stickyNode?.getBoundingClientRect()?.top;
let rect = (this.$refs['sticky'] as Element).getBoundingClientRect();
let rect = (this.$refs['sticky'] as UniElement).getBoundingClientRect();
this.stickyTop = rect.top;
}
}
......
pages/template/swiper-list/swiper-list.uvue
浏览文件 @ 5cc644b3
......@@ -46,8 +46,8 @@
return {
swiperList: [] as SwiperViewItem[],
swiperIndex: -1,
$tabScrollView: null as null | Element,
$indicatorNode: null as null | Element,
$tabScrollView: null as null | UniElement,
$indicatorNode: null as null | UniElement,
$animationFinishIndex: 0,
$swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[]
......@@ -63,9 +63,9 @@
}
},
onReady() {
this.$tabScrollView = this.$refs['tabScroll'] as Element
this.$indicatorNode = this.$refs['indicator'] as Element
this.$swiperWidth = (this.$refs["swiper"] as Element).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as UniElement
this.$indicatorNode = this.$refs['indicator'] as UniElement
this.$swiperWidth = (this.$refs["swiper"] as UniElement).getBoundingClientRect().width
this.cacheTabItemsSize()
this.setSwiperIndex(0, true)
},
......@@ -119,7 +119,7 @@
*/
cacheTabItemsSize() {
this.$swiperTabsRect.length = 0;
const tabs = this.$refs["swipertab"] as Element[]
const tabs = this.$refs["swipertab"] as UniElement[]
tabs.forEach((node) => {
this.$swiperTabsRect.push({
x: node.offsetLeft,
......
pages/template/swiper-list2/swiper-list2.uvue
浏览文件 @ 5cc644b3
......@@ -40,7 +40,7 @@
return {
swiperList: [] as SwiperViewItem[],
swiperIndex: -1,
$tabScrollView: null as null | Element,
$tabScrollView: null as null | UniElement,
$animationFinishIndex: 0,
$swiperWidth: 0
}
......@@ -53,8 +53,8 @@
}
},
onReady() {
this.$tabScrollView = this.$refs['tabScroll'] as Element
this.$swiperWidth = (this.$refs["swiper"] as Element).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as UniElement
this.$swiperWidth = (this.$refs["swiper"] as UniElement).getBoundingClientRect().width
this.setSwiperIndex(0, true)
},
methods: {
......@@ -108,7 +108,7 @@
const min_ratio = 1
const max_ratio = 1.3
const tabs = this.$refs['swipertab'] as Element[]
const tabs = this.$refs['swipertab'] as UniElement[]
const current_node = tabs[current_index]!
const move_to_node = tabs[move_to_index]!
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或