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

[improvement] optimize boundingClientRect (#528)

Browse Source
This commit is contained in:
neverland 2018-09-07 11:54:04 +08:00 committed by GitHub
parent 8246ce24e3
commit 92d09aba86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 166 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/dev.js
View File

@ -1,5 +1,9 @@
require('./compiler');
const fs = require('fs-extra');
const path = require('path');
const serve = require('webpack-serve');
const config = require('./webpack.doc.dev');
fs.removeSync(path.join(__dirname, '../example/dist'));
serve({}, { config });

31
dist/common/create.js vendored
View File

@ -1,6 +1,4 @@
function $emit() {
this.triggerEvent.apply(this, arguments);
}
import { basic } from '../mixins/basic';
export function create(sfc) {
// map props to properties
@ -15,25 +13,26 @@ export function create(sfc) {
delete sfc.mixins;
}
// map field to form-field behavior
if (sfc.field) {
sfc.behaviors = sfc.behaviors || [];
sfc.behaviors.push('wx://form-field');
}
// map classes to externalClasses
sfc.externalClasses = sfc.classes || [];
delete sfc.classes;
// add default externalClasses
sfc.externalClasses.push('custom-class');
// add default behaviors
sfc.behaviors = sfc.behaviors || [];
sfc.behaviors.push(basic);
// add default options
sfc.options = sfc.options || {};
sfc.options.multipleSlots = true;
sfc.options.addGlobalClass = true;
// add default externalClasses
sfc.externalClasses = sfc.classes || [];
sfc.externalClasses.push('custom-class');
// add default methods
sfc.methods = sfc.methods || {};
sfc.methods.$emit = $emit;
// map field to form-field behavior
if (sfc.field) {
sfc.behaviors.push('wx://form-field');
}
Component(sfc);
};

23
dist/mixins/basic.js vendored Normal file
View File

@ -0,0 +1,23 @@
export const basic = Behavior({
options: {
multipleSlots: true,
addGlobalClass: true
},
methods: {
$emit() {
this.triggerEvent.apply(this, arguments);
},
getRect(selector, all) {
return new Promise((resolve, reject) => {
wx.createSelectorQuery()
.in(this)[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
rect && resolve(rect);
})
.exec();
});
}
}
});

78
dist/notice-bar/index.js vendored
View File

@ -76,55 +76,47 @@ create({
methods: {
init() {
wx.createSelectorQuery()
.in(this)
.select('.van-notice-bar__content')
.boundingClientRect((rect) => {
this.getRect('.van-notice-bar__content').then(rect => {
if (!rect || !rect.width) {
return;
}
this.setData({
width: rect.width
});
this.getRect('.van-notice-bar__content-wrap').then(rect => {
if (!rect || !rect.width) {
return;
}
this.setData({
width: rect.width
});
wx.createSelectorQuery()
.in(this)
.select('.van-notice-bar__content-wrap')
.boundingClientRect((rect) => {
if (!rect || !rect.width) {
return;
}
const wrapWidth = rect.width;
const {
width, speed, scrollable, delay
} = this.data;
const wrapWidth = rect.width;
const {
width, speed, scrollable, delay
} = this.data;
if (scrollable && wrapWidth < width) {
const elapse = width / speed * 1000;
const animation = wx.createAnimation({
duration: elapse,
timeingFunction: 'linear',
delay
});
const resetAnimation = wx.createAnimation({
duration: 0,
timeingFunction: 'linear'
});
if (scrollable && wrapWidth < width) {
const elapse = width / speed * 1000;
const animation = wx.createAnimation({
duration: elapse,
timeingFunction: 'linear',
delay
});
const resetAnimation = wx.createAnimation({
duration: 0,
timeingFunction: 'linear'
});
this.setData({
elapse,
wrapWidth,
animation,
resetAnimation
}, () => {
this.scroll();
});
}
})
.exec();
})
.exec();
this.setData({
elapse,
wrapWidth,
animation,
resetAnimation
}, () => {
this.scroll();
});
}
});
});
},
scroll() {

14
dist/progress/index.js vendored
View File

@ -85,25 +85,15 @@ create({
});
},
getRect(selector, callback) {
wx.createSelectorQuery()
.in(this)
.select(selector)
.boundingClientRect(rect => {
rect && callback(rect);
})
.exec();
},
getWidth() {
this.getRect('.van-progress', rect => {
this.getRect('.van-progress').then(rect => {
this.setData({
progressWidth: rect.width
});
this.setPortionStyle();
});
this.getRect('.van-progress__pivot', rect => {
this.getRect('.van-progress__pivot').then(rect => {
this.setData({
pivotWidth: rect.width || 0
});

10
dist/slider/index.js vendored
View File

@ -33,14 +33,6 @@ create({
},
methods: {
getRect(callback) {
wx.createSelectorQuery()
.in(this)
.select('.van-slider')
.boundingClientRect(callback)
.exec();
},
onTouchStart(event) {
if (this.data.disabled) return;
@ -52,7 +44,7 @@ create({
if (this.data.disabled) return;
this.touchMove(event);
this.getRect(rect => {
this.getRect('.van-slider').then(rect => {
const diff = this.deltaX / rect.width * 100;
this.updateValue(this.startValue + diff);
});

19
dist/tabs/index.js vendored
View File

@ -100,21 +100,12 @@ create({
}
},
getRect(selector, callback, all) {
wx.createSelectorQuery()
.in(this)[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
rect && callback(rect);
})
.exec();
},
setLine() {
if (this.data.type !== 'line') {
return;
}
this.getRect('.van-tab', rects => {
this.getRect('.van-tab', true).then(rects => {
const rect = rects[this.data.active];
const width = this.data.lineWidth || rect.width;
let left = rects
@ -130,7 +121,7 @@ create({
transition-duration: ${this.data.duration}s;
`
});
}, true);
});
},
setActiveTab() {
@ -155,20 +146,20 @@ create({
return;
}
this.getRect('.van-tab', tabRects => {
this.getRect('.van-tab', true).then(tabRects => {
const tabRect = tabRects[this.data.active];
const offsetLeft = tabRects
.slice(0, this.data.active)
.reduce((prev, curr) => prev + curr.width, 0);
const tabWidth = tabRect.width;
this.getRect('.van-tabs__nav', navRect => {
this.getRect('.van-tabs__nav').then(navRect => {
const navWidth = navRect.width;
this.setData({
scrollLeft: offsetLeft - (navWidth - tabWidth) / 2
});
});
}, true);
});
}
}
});

31
packages/common/create.js
View File

@ -1,6 +1,4 @@
function $emit() {
this.triggerEvent.apply(this, arguments);
}
import { basic } from '../mixins/basic';
export function create(sfc) {
// map props to properties
@ -15,25 +13,26 @@ export function create(sfc) {
delete sfc.mixins;
}
// map field to form-field behavior
if (sfc.field) {
sfc.behaviors = sfc.behaviors || [];
sfc.behaviors.push('wx://form-field');
}
// map classes to externalClasses
sfc.externalClasses = sfc.classes || [];
delete sfc.classes;
// add default externalClasses
sfc.externalClasses.push('custom-class');
// add default behaviors
sfc.behaviors = sfc.behaviors || [];
sfc.behaviors.push(basic);
// add default options
sfc.options = sfc.options || {};
sfc.options.multipleSlots = true;
sfc.options.addGlobalClass = true;
// add default externalClasses
sfc.externalClasses = sfc.classes || [];
sfc.externalClasses.push('custom-class');
// add default methods
sfc.methods = sfc.methods || {};
sfc.methods.$emit = $emit;
// map field to form-field behavior
if (sfc.field) {
sfc.behaviors.push('wx://form-field');
}
Component(sfc);
};

23
packages/mixins/basic.js Normal file
View File

@ -0,0 +1,23 @@
export const basic = Behavior({
options: {
multipleSlots: true,
addGlobalClass: true
},
methods: {
$emit() {
this.triggerEvent.apply(this, arguments);
},
getRect(selector, all) {
return new Promise((resolve, reject) => {
wx.createSelectorQuery()
.in(this)[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
rect && resolve(rect);
})
.exec();
});
}
}
});

78
packages/notice-bar/index.js
View File

@ -76,55 +76,47 @@ create({
methods: {
init() {
wx.createSelectorQuery()
.in(this)
.select('.van-notice-bar__content')
.boundingClientRect((rect) => {
this.getRect('.van-notice-bar__content').then(rect => {
if (!rect || !rect.width) {
return;
}
this.setData({
width: rect.width
});
this.getRect('.van-notice-bar__content-wrap').then(rect => {
if (!rect || !rect.width) {
return;
}
this.setData({
width: rect.width
});
wx.createSelectorQuery()
.in(this)
.select('.van-notice-bar__content-wrap')
.boundingClientRect((rect) => {
if (!rect || !rect.width) {
return;
}
const wrapWidth = rect.width;
const {
width, speed, scrollable, delay
} = this.data;
const wrapWidth = rect.width;
const {
width, speed, scrollable, delay
} = this.data;
if (scrollable && wrapWidth < width) {
const elapse = width / speed * 1000;
const animation = wx.createAnimation({
duration: elapse,
timeingFunction: 'linear',
delay
});
const resetAnimation = wx.createAnimation({
duration: 0,
timeingFunction: 'linear'
});
if (scrollable && wrapWidth < width) {
const elapse = width / speed * 1000;
const animation = wx.createAnimation({
duration: elapse,
timeingFunction: 'linear',
delay
});
const resetAnimation = wx.createAnimation({
duration: 0,
timeingFunction: 'linear'
});
this.setData({
elapse,
wrapWidth,
animation,
resetAnimation
}, () => {
this.scroll();
});
}
})
.exec();
})
.exec();
this.setData({
elapse,
wrapWidth,
animation,
resetAnimation
}, () => {
this.scroll();
});
}
});
});
},
scroll() {

14
packages/progress/index.js
View File

@ -85,25 +85,15 @@ create({
});
},
getRect(selector, callback) {
wx.createSelectorQuery()
.in(this)
.select(selector)
.boundingClientRect(rect => {
rect && callback(rect);
})
.exec();
},
getWidth() {
this.getRect('.van-progress', rect => {
this.getRect('.van-progress').then(rect => {
this.setData({
progressWidth: rect.width
});
this.setPortionStyle();
});
this.getRect('.van-progress__pivot', rect => {
this.getRect('.van-progress__pivot').then(rect => {
this.setData({
pivotWidth: rect.width || 0
});

10
packages/slider/index.js
View File

@ -33,14 +33,6 @@ create({
},
methods: {
getRect(callback) {
wx.createSelectorQuery()
.in(this)
.select('.van-slider')
.boundingClientRect(callback)
.exec();
},
onTouchStart(event) {
if (this.data.disabled) return;
@ -52,7 +44,7 @@ create({
if (this.data.disabled) return;
this.touchMove(event);
this.getRect(rect => {
this.getRect('.van-slider').then(rect => {
const diff = this.deltaX / rect.width * 100;
this.updateValue(this.startValue + diff);
});

19
packages/tabs/index.js
View File

@ -100,21 +100,12 @@ create({
}
},
getRect(selector, callback, all) {
wx.createSelectorQuery()
.in(this)[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
rect && callback(rect);
})
.exec();
},
setLine() {
if (this.data.type !== 'line') {
return;
}
this.getRect('.van-tab', rects => {
this.getRect('.van-tab', true).then(rects => {
const rect = rects[this.data.active];
const width = this.data.lineWidth || rect.width;
let left = rects
@ -130,7 +121,7 @@ create({
transition-duration: ${this.data.duration}s;
`
});
}, true);
});
},
setActiveTab() {
@ -155,20 +146,20 @@ create({
return;
}
this.getRect('.van-tab', tabRects => {
this.getRect('.van-tab', true).then(tabRects => {
const tabRect = tabRects[this.data.active];
const offsetLeft = tabRects
.slice(0, this.data.active)
.reduce((prev, curr) => prev + curr.width, 0);
const tabWidth = tabRect.width;
this.getRect('.van-tabs__nav', navRect => {
this.getRect('.van-tabs__nav').then(navRect => {
const navWidth = navRect.width;
this.setData({
scrollLeft: offsetLeft - (navWidth - tabWidth) / 2
});
});
}, true);
});
}
}
});