Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(swiper,tab-bar): fix resize behavior #602

Merged
merged 3 commits into from
Nov 2, 2019
Merged

fix(swiper,tab-bar): fix resize behavior #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c223f67
fix(swiper,tab-bar): fix resize behavior
zouhangwithsweet Oct 29, 2019
27e0b9a
test(tabbar,swiper): add some ignore
zouhangwithsweet Oct 29, 2019
be83f19
Merge branch 'dev' of https://github.com/didi/mand-mobile into fix_re…
zouhangwithsweet Oct 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 41 additions & 21 deletions components/swiper/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,29 +154,23 @@ export default {
beforeMount
*/
mounted() {
this.ready = true
this.$swiper = this.$el.querySelector('.md-swiper-container')
this.$swiperBox = this.$el.querySelector('.md-swiper-box')
this.$nextTick(() => {
this.$_reInitItems()
this.play(this.duration)
window.addEventListener('resize', this.$_resize)
})
this.$_resizeEnterBehavior()
},
/*
beforeUpdate
updated
activated
deactivated
beforeDestroy
*/
activated() {
this.$_resizeEnterBehavior()
},
deactivated() {
this.$_resizeLeaveBehavior()
},
/**
beforeDestroy
*/
destroyed() {
this.ready = false
this.$_clearTimer()
window.removeEventListener('resize', this.$_resize)
if (this.__resizeTimeout__) {
clearTimeout(this.__resizeTimeout__)
}
this.$_resizeLeaveBehavior()
},
/*
errorCaptured
Expand Down Expand Up @@ -214,6 +208,7 @@ export default {
if (this.isPrevent) {
e.preventDefault()
}
/* istanbul ignore if */
if (!this.dragging) {
return
}
Expand All @@ -223,11 +218,13 @@ export default {
if (this.isPrevent) {
e.preventDefault()
}
/* istanbul ignore if */
if (this.userScrolling) {
this.dragging = false
this.dragState = {}
return
}
/* istanbul ignore if */
if (!this.dragging) {
return
}
Expand Down Expand Up @@ -307,11 +304,11 @@ export default {

$_opacity(animate = true, opacity) {
const children = this.$children

/* istanbul ignore if */
if (!children || !children.length) {
return
}

/* istanbul ignore if */
if (typeof opacity !== 'undefined') {
let toIndex = 0
let fromIndex = this.toIndex
Expand Down Expand Up @@ -393,6 +390,7 @@ export default {
if (this.duration > 0 && this.oItemCount > 1) {
this.$_clearTimer()
this.timer = setInterval(() => {
/* istanbul ignore if */
if (!this.isLoop && this.index >= this.rItemCount - 1) {
return this.$_clearTimer()
}
Expand All @@ -418,6 +416,7 @@ export default {
if ((!vertical && currentTop === startTop) || (vertical && currentLeft === startLeft)) {
return false
} else {
/* istanbul ignore next */
if (diffX * diffX + diffY * diffY >= 25) {
const _touchAngle = Math.atan2(Math.abs(diffY), Math.abs(diffX)) * 180 / Math.PI
return !vertical ? _touchAngle > this.touchAngle : 90 - _touchAngle > this.touchAngle
Expand Down Expand Up @@ -466,6 +465,7 @@ export default {
if (!towards) {
return
}
/* istanbul ignore next */
if (options && options.index !== undefined) {
this.index = options.index
} else if (towards === 'prev') {
Expand Down Expand Up @@ -502,7 +502,7 @@ export default {
setTimeout(() => {
const isFirstItem = this.isFirstItem && this.isLoop
const isLastItem = this.isLastItem && this.isLoop

/* istanbul ignore next */
this.transitionEndHandler = () => {
// Recover first and last page
if (isLastItem) {
Expand Down Expand Up @@ -564,7 +564,7 @@ export default {
let offsetLeft = dragState.currentLeft - dragState.startLeft
let offsetTop = dragState.currentTop - dragState.startTop
this.userScrolling = this.$_isScroll(dragState, Math.abs(offsetLeft), Math.abs(offsetTop))

/* istanbul ignore if */
if (this.userScrolling) {
return
}
Expand Down Expand Up @@ -637,6 +637,24 @@ export default {

this.play(this.duration)
},
$_resizeEnterBehavior() {
this.ready = true
this.$swiper = this.$el.querySelector('.md-swiper-container')
this.$swiperBox = this.$el.querySelector('.md-swiper-box')
this.$nextTick(() => {
this.$_reInitItems()
this.play(this.duration)
window.addEventListener('resize', this.$_resize)
})
},
$_resizeLeaveBehavior() {
this.ready = false
this.$_clearTimer()
window.removeEventListener('resize', this.$_resize)
if (this.__resizeTimeout__) {
clearTimeout(this.__resizeTimeout__)
}
},

// MARK: events handler, 如 $_onButtonClick

Expand Down Expand Up @@ -690,6 +708,7 @@ export default {
if (!this.ready) {
return
}
/* istanbul ignore next */
this.$nextTick(() => {
this.$_clearTimer()
this.$_reInitItems()
Expand All @@ -703,6 +722,7 @@ export default {
if (!this.ready) {
return
}
/* istanbul ignore next */
this.$nextTick(() => {
this.$_clearTimer()
this.$_reInitItems()
Expand Down
28 changes: 18 additions & 10 deletions components/tab-bar/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,17 +149,10 @@ export default {
}
},
mounted() {
window.addEventListener('resize', this.reflow)
this.reflow()

if (this.immediate) {
this.$nextTick(() => {
this.$emit('change', this.items[this.currentIndex], this.currentIndex)
})
}
this.$_resizeEnterBehavior()
},
beforeDestroy() {
window.removeEventListener('resize', this.reflow)
this.$_resizeLeaveBehavior()
},

methods: {
Expand All @@ -185,8 +178,22 @@ export default {
this.currentName = item.name
this.$emit('input', item.name)
},
$_resizeEnterBehavior() {
window.addEventListener('resize', this.reflow)
this.reflow()
/* istanbul ignore next */
if (this.immediate) {
this.$nextTick(() => {
this.$emit('change', this.items[this.currentIndex], this.currentIndex)
})
}
},
$_resizeLeaveBehavior() {
window.removeEventListener('resize', this.reflow)
},
// MARK: public methods
reflow() {
/* istanbul ignore next */
if (!this.$refs.items || this.$refs.items.length === 0) {
return
}
Expand All @@ -200,6 +207,7 @@ export default {
this.contentW = contentWidth
this.$refs.scroller.reflowScroller()
this.$nextTick(() => {
/* istanbul ignore next */
if (!this.$refs.items || !this.$refs.items[this.currentIndex]) {
return
}
Expand All @@ -215,7 +223,7 @@ export default {
this.$refs.scroller.scrollTo(0, 0, true)
return
}

/* istanbul ignore next */
if (!nextTarget) {
this.$refs.scroller.scrollTo(this.contentW, 0, true)
return
Expand Down