blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

refactor(area): use requestAnimationFrame instead of setTimeout (#3522)

Browse Source
This commit is contained in:
rex 2020-08-14 15:10:40 +08:00 committed by GitHub
parent 2307f28d7b
commit 5ea5d8f25b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/area/index.ts
View File

@ -1,6 +1,7 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { pickerProps } from '../picker/shared'; import { pickerProps } from '../picker/shared';
import { Weapp } from 'definitions/weapp'; import { Weapp } from 'definitions/weapp';
import { requestAnimationFrame } from '../common/utils';
type AreaItem = { type AreaItem = {
name: string; name: string;
@ -19,21 +20,21 @@ VantComponent({
observer(value: string) { observer(value: string) {
this.code = value; this.code = value;
this.setValues(); this.setValues();
} },
}, },
areaList: { areaList: {
type: Object, type: Object,
value: {}, value: {},
observer: 'setValues' observer: 'setValues',
}, },
columnsNum: { columnsNum: {
type: null, type: null,
value: 3, value: 3,
observer(value: number) { observer(value: number) {
this.setData({ this.setData({
displayColumns: this.data.columns.slice(0, +value) displayColumns: this.data.columns.slice(0, +value),
}); });
} },
}, },
columnsPlaceholder: { columnsPlaceholder: {
type: Array, type: Array,
@ -42,23 +43,23 @@ VantComponent({
typeToColumnsPlaceholder: { typeToColumnsPlaceholder: {
province: val[0] || '', province: val[0] || '',
city: val[1] || '', city: val[1] || '',
county: val[2] || '' county: val[2] || '',
} },
}); });
} },
} },
}, },
data: { data: {
columns: [{ values: [] }, { values: [] }, { values: [] }], columns: [{ values: [] }, { values: [] }, { values: [] }],
displayColumns: [{ values: [] }, { values: [] }, { values: [] }], displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
typeToColumnsPlaceholder: {} typeToColumnsPlaceholder: {},
}, },
mounted() { mounted() {
setTimeout(() => { requestAnimationFrame(() => {
this.setValues(); this.setValues();
}, 0); });
}, },
methods: { methods: {
@ -109,7 +110,7 @@ VantComponent({
this.$emit('change', { this.$emit('change', {
picker, picker,
values: this.parseOutputValues(picker.getValues()), values: this.parseOutputValues(picker.getValues()),
index index,
}); });
}); });
}, },
@ -127,9 +128,9 @@ VantComponent({
} }
const list = this.getConfig(type); const list = this.getConfig(type);
result = Object.keys(list).map(code => ({ result = Object.keys(list).map((code) => ({
code, code,
name: list[code] name: list[code],
})); }));
if (code) { if (code) {
@ -138,7 +139,7 @@ VantComponent({
code = '9'; code = '9';
} }
result = result.filter(item => item.code.indexOf(code) === 0); result = result.filter((item) => item.code.indexOf(code) === 0);
} }
if (typeToColumnsPlaceholder[type] && result.length) { if (typeToColumnsPlaceholder[type] && result.length) {
@ -151,7 +152,7 @@ VantComponent({
: COLUMNSPLACEHOLDERCODE.slice(4, 6); : COLUMNSPLACEHOLDERCODE.slice(4, 6);
result.unshift({ result.unshift({
code: `${code}${codeFill}`, code: `${code}${codeFill}`,
name: typeToColumnsPlaceholder[type] name: typeToColumnsPlaceholder[type],
}); });
} }
@ -236,7 +237,7 @@ VantComponent({
getValues() { getValues() {
const picker = this.getPicker(); const picker = this.getPicker();
return picker ? picker.getValues().filter(value => !!value) : []; return picker ? picker.getValues().filter((value) => !!value) : [];
}, },
getDetail() { getDetail() {
@ -246,7 +247,7 @@ VantComponent({
country: '', country: '',
province: '', province: '',
city: '', city: '',
county: '' county: '',
}; };
if (!values.length) { if (!values.length) {
@ -270,6 +271,6 @@ VantComponent({
reset(code) { reset(code) {
this.code = code || ''; this.code = code || '';
return this.setValues(); return this.setValues();
} },
} },
}); });

5
packages/calendar/index.ts
View File

@ -12,6 +12,7 @@ import {
} from './utils'; } from './utils';
import Toast from '../toast/toast'; import Toast from '../toast/toast';
import { requestAnimationFrame } from '../common/utils';
VantComponent({ VantComponent({
props: { props: {
@ -172,7 +173,7 @@ VantComponent({
}, },
scrollIntoView() { scrollIntoView() {
setTimeout(() => { requestAnimationFrame(() => {
const { const {
currentDate, currentDate,
type, type,
@ -197,7 +198,7 @@ VantComponent({
return false; return false;
}); });
}, 100); });
}, },
onOpen() { onOpen() {

7
packages/notice-bar/index.ts
View File

@ -1,5 +1,6 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { Weapp } from 'definitions/weapp'; import { Weapp } from 'definitions/weapp';
import { requestAnimationFrame } from '../common/utils';
VantComponent({ VantComponent({
props: { props: {
@ -48,7 +49,7 @@ VantComponent({
color: String, color: String,
backgroundColor: String, backgroundColor: String,
background: String, background: String,
wrapable: Boolean wrapable: Boolean,
}, },
data: { data: {
@ -112,14 +113,14 @@ VantComponent({
.export(), .export(),
}); });
setTimeout(() => { requestAnimationFrame(() => {
this.setData({ this.setData({
animationData: this.animation animationData: this.animation
.translateX(-this.contentWidth) .translateX(-this.contentWidth)
.step() .step()
.export(), .export(),
}); });
}, 20); });
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.scroll(); this.scroll();