+ @scroll="scroll"
+ @pulling-down="onPullingDown"
+ @pulling-up="onPullingUp">
{{ title }}
@@ -52,6 +54,8 @@
const COMPONENT_NAME = 'cube-index-list'
const EVENT_SELECT = 'select'
const EVENT_TITLE_CLICK = 'title-click'
+ const EVENT_PULLING_UP = 'pulling-up'
+ const EVENT_PULLING_DOWN = 'pulling-down'
const ANCHOR_HEIGHT = inBrowser ? window.innerHeight <= 480 ? 17 : 18 : 18
const transformStyleKey = prefixStyle('transform')
@@ -76,6 +80,14 @@
navbar: {
type: Boolean,
default: true
+ },
+ pullDownRefresh: {
+ type: [Boolean, Object],
+ default: false
+ },
+ pullUpLoad: {
+ type: [Boolean, Object],
+ default: false
}
},
data() {
@@ -83,25 +95,9 @@
currentIndex: 0,
scrollY: -1,
diff: -1,
- options: {
- probeType: 3
- },
titleHeight: null
}
},
- created() {
- this.listenScroll = true
- this.groupList = []
- this.listHeight = []
- this.touch = {}
- this.subTitleHeight = 0
- },
- mounted() {
- this.$nextTick(() => {
- this.titleHeight = this.title && this.$refs.title ? getRect(this.$refs.title).height : 0
- this._calculateHeight()
- })
- },
computed: {
fixedTitle() {
if (this.titleHeight === null || this.scrollY > -this.titleHeight) {
@@ -113,12 +109,32 @@
return this.data.map((group) => {
return group ? group.shortcut || group.name.substr(0, 1) : ''
})
+ },
+ options() {
+ return {
+ probeType: 3,
+ pullDownRefresh: this.pullDownRefresh,
+ pullUpLoad: this.pullUpLoad
+ }
}
},
+ created() {
+ this.listenScroll = true
+ this.groupList = []
+ this.listHeight = []
+ this.touch = {}
+ this.subTitleHeight = 0
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.titleHeight = this.title && this.$refs.title ? getRect(this.$refs.title).height : 0
+ this._calculateHeight()
+ })
+ },
methods: {
/* TODO: remove refresh next minor version */
refresh() {
- this.$refs.indexList.refresh()
+ this.$refs.scroll.refresh()
},
selectItem(item) {
this.$emit(EVENT_SELECT, item)
@@ -129,6 +145,9 @@
titleClick() {
this.$emit(EVENT_TITLE_CLICK, this.title)
},
+ forceUpdate() {
+ this.$refs.scroll.forceUpdate()
+ },
onShortcutTouchStart(e) {
const target = getMatchedTarget(e, 'cube-index-list-nav-item')
if (!target) return
@@ -147,6 +166,12 @@
this._scrollTo(anchorIndex)
},
+ onPullingUp() {
+ this.$emit(EVENT_PULLING_UP)
+ },
+ onPullingDown() {
+ this.$emit(EVENT_PULLING_DOWN)
+ },
_calculateHeight() {
this.groupList = this.$el.getElementsByClassName('cube-index-list-group')
const subTitleEl = this.$el.getElementsByClassName('cube-index-list-anchor')[0]
@@ -171,8 +196,8 @@
} else if (index > this.listHeight.length - 2) {
index = this.listHeight.length - 2
}
- this.$refs.indexList.scrollToElement(this.groupList[index], this.speed)
- this.scrollY = this.$refs.indexList.scroll.y
+ this.$refs.scroll.scrollToElement(this.groupList[index], this.speed)
+ this.scrollY = this.$refs.scroll.scroll.y
}
},
watch: {
diff --git a/test/unit/specs/index-list.spec.js b/test/unit/specs/index-list.spec.js
index 321c3a470b4461f86ae0df091081b43219af11b8..a899e34df825c70c16e0748c393136c5f026a231 100644
--- a/test/unit/specs/index-list.spec.js
+++ b/test/unit/specs/index-list.spec.js
@@ -2,8 +2,8 @@ import Vue from 'vue2'
import IndexList from '@/modules/index-list'
import instantiateComponent from '@/common/helpers/instantiate-component'
import { dispatchSwipe, dispatchTap } from '../utils/event'
-
import cityData from '../fake/index-list.json'
+
// 处理数据
let data = []
cityData.forEach((cityGroup) => {
@@ -18,7 +18,9 @@ cityData.forEach((cityGroup) => {
})
data.push(group)
})
+
const title = '当前城市：北京市'
+
describe('IndexList', () => {
describe('IndexList.vue', () => {
let vm
@@ -69,67 +71,147 @@ describe('IndexList', () => {
'title-click': titleClickHandler
})
vm.$nextTick(() => {
+ // select
const items = vm.$el.querySelectorAll('.cube-index-list-item')
dispatchTap(items[2])
expect(selectHandler).to.be.calledOnce
+ // title-click
dispatchTap(vm.$el.querySelector('.cube-index-list-title'))
expect(titleClickHandler).to.be.calledOnce
+
done()
})
})
- it('should fixed title', function () {
+ it('should trigger pulling-up', function (done) {
this.timeout(10000)
- vm = createIndexList()
- return new Promise((resolve) => {
+
+ const pullingUpHandler = sinon.spy()
+
+ vm = createIndexList({
+ title,
+ data: data.slice(0, 1),
+ pullUpLoad: true
+ }, {
+ 'pulling-up': pullingUpHandler
+ })
+
+ const scrollWrapper = vm.$el.querySelector('.cube-scroll-wrapper')
+ scrollWrapper.style.height = '300px'
+ vm.refresh()
+
+ setTimeout(() => {
+ const scrollContent = vm.$el.querySelector('.cube-scroll-content li:first-child')
+ dispatchSwipe(scrollContent, [
+ {
+ pageX: 10,
+ pageY: 300
+ },
+ {
+ pageX: 10,
+ pageY: 10
+ }
+ ], 100)
+
setTimeout(() => {
- vm.$parent.updateRenderData({
- props: {
- title: title,
- data: data,
- speed: 0
- },
- on: {}
- })
- vm.$parent.$forceUpdate()
- }, 30)
+ expect(pullingUpHandler).to.be.calledOnce
+
+ vm.forceUpdate()
+ done()
+ }, 400)
+ }, 150)
+ })
+
+ it('should trigger pulling-down', function (done) {
+ this.timeout(10000)
+
+ const pullingDownHandler = sinon.spy()
+
+ vm = createIndexList({
+ title,
+ data: data.slice(0, 1),
+ pullDownRefresh: true
+ }, {
+ 'pulling-down': pullingDownHandler
+ })
+
+ const scrollWrapper = vm.$el.querySelector('.cube-scroll-wrapper')
+ scrollWrapper.style.height = '300px'
+ vm.refresh()
+
+ setTimeout(() => {
+ const scrollContent = vm.$el.querySelector('.cube-scroll-content li:first-child')
+ dispatchSwipe(scrollContent, [
+ {
+ pageX: 10,
+ pageY: 10
+ },
+ {
+ pageX: 10,
+ pageY: 300
+ }
+ ], 100)
+
+ setTimeout(() => {
+ expect(pullingDownHandler).to.be.calledOnce
+
+ done()
+ }, 400)
+ }, 150)
+ })
+
+ it('should fixed title', function (done) {
+ this.timeout(10000)
+ vm = createIndexList()
+
+ setTimeout(() => {
+ vm.$parent.updateRenderData({
+ props: {
+ title: title,
+ data: data,
+ speed: 0
+ },
+ on: {}
+ })
+ vm.$parent.$forceUpdate()
+ }, 30)
+
+ setTimeout(() => {
+ const zEle = vm.$el.querySelector('.cube-index-list-nav li[data-index="2"]')
+ // nav li
+ dispatchSwipe(zEle, {
+ pageX: 342,
+ pageY: 327
+ }, 0)
setTimeout(() => {
- const zEle = vm.$el.querySelector('.cube-index-list-nav li[data-index="2"]')
- // nav li
- dispatchSwipe(zEle, {
+ // item active class
+ dispatchSwipe(vm.$el.querySelector('.cube-index-list-item'), {
pageX: 342,
pageY: 327
}, 0)
- setTimeout(() => {
- // item active class
- dispatchSwipe(vm.$el.querySelector('.cube-index-list-item'), {
- pageX: 342,
- pageY: 327
- }, 0)
- // scroll
- const fixedEle = vm.$el.querySelector('.cube-index-list-fixed')
+ // scroll
+ const fixedEle = vm.$el.querySelector('.cube-index-list-fixed')
+ expect(fixedEle.textContent.trim())
+ .to.equal('B')
+ const el = vm.$el.querySelector('.cube-index-list-content')
+ vm.$refs.scroll.scroll.on('scrollEnd', () => {
expect(fixedEle.textContent.trim())
- .to.equal('B')
- const el = vm.$el.querySelector('.cube-index-list-content')
- vm.$refs.indexList.scroll.on('scrollEnd', () => {
- expect(fixedEle.textContent.trim())
- .to.equal('C')
- resolve()
- })
- dispatchSwipe(el, [
- {
- pageX: 300,
- pageY: 400
- },
- {
- pageX: 300,
- pageY: 380
- }
- ], 100)
- }, 20)
- }, 150)
- })
+ .to.equal('C')
+ done()
+ })
+ dispatchSwipe(el, [
+ {
+ pageX: 300,
+ pageY: 400
+ },
+ {
+ pageX: 300,
+ pageY: 380
+ }
+ ], 100)
+ }, 20)
+ }, 150)
})
it('should not have navbar when navbar prop is false', () => {
@@ -155,16 +237,30 @@ describe('IndexList', () => {
})
})
- it('should handle condition of unexpected param', function () {
+ it('should handle condition of unexpected param', function (done) {
this.timeout(10000)
vm = createIndexList({
title,
data,
speed: 0
})
- return new Promise((resolve) => {
+ setTimeout(() => {
+ const bEl = vm.$el.querySelector('.cube-index-list-nav li[data-index="2"]')
+ dispatchSwipe(bEl, [
+ {
+ pageX: 300,
+ pageY: 400
+ },
+ {
+ pageX: 300,
+ pageY: 50
+ }
+ ], 100)
setTimeout(() => {
- const bEl = vm.$el.querySelector('.cube-index-list-nav li[data-index="2"]')
+ const fixedEl = vm.$el.querySelector('.cube-index-list-fixed')
+ expect(fixedEl.textContent.trim())
+ .to.equal('★热门城市')
+
dispatchSwipe(bEl, [
{
pageX: 300,
@@ -172,37 +268,21 @@ describe('IndexList', () => {
},
{
pageX: 300,
- pageY: 50
+ pageY: 1000
}
], 100)
setTimeout(() => {
- const fixedEl = vm.$el.querySelector('.cube-index-list-fixed')
expect(fixedEl.textContent.trim())
- .to.equal('★热门城市')
-
- dispatchSwipe(bEl, [
- {
- pageX: 300,
- pageY: 400
- },
- {
- pageX: 300,
- pageY: 1000
- }
- ], 100)
- setTimeout(() => {
- expect(fixedEl.textContent.trim())
- .to.equal('Z')
- resolve()
- }, 150)
+ .to.equal('Z')
+ done()
}, 150)
+ }, 150)
- vm.scrollY = 0
- setTimeout(() => {
- vm.scrollY = -10000
- }, 0)
- }, 30)
- })
+ vm.scrollY = 0
+ setTimeout(() => {
+ vm.scrollY = -10000
+ }, 0)
+ }, 30)
})
function createIndexList(props = {}, events = {}) {