From faf43f3448753d43155cdee800e9abd20eaf084e Mon Sep 17 00:00:00 2001 From: rex Date: Tue, 23 Apr 2019 17:42:19 +0800 Subject: [PATCH] =?UTF-8?q?[bugfix]=20Picker:=20=E5=9B=9E=E6=BB=9Amovable-?= =?UTF-8?q?view=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/picker/index.js | 22 +++-- packages/picker-column/index.less | 7 +- packages/picker-column/index.ts | 149 ++++++++++++++++++------------ packages/picker-column/index.wxml | 42 +++++---- packages/picker/README.md | 2 +- packages/picker/index.wxml | 6 +- 6 files changed, 132 insertions(+), 96 deletions(-) diff --git a/example/pages/picker/index.js b/example/pages/picker/index.js index a0409216..db87a324 100644 --- a/example/pages/picker/index.js +++ b/example/pages/picker/index.js @@ -1,22 +1,25 @@ import Page from '../../common/page'; import Toast from '../../dist/toast/toast'; -const citys = { - '浙江': ['杭州', { text: '宁波', disabled: true }, '温州', '嘉兴', '湖州'], - '福建': ['福州', '厦门', '莆田', '三明', '泉州'] -}; - Page({ data: { column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'], - column2: citys['浙江'], + column2: [ + { text: '杭州', disabled: true }, + { text: '宁波' }, + { text: '温州' } + ], + column3: { + 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'], + 福建: ['福州', '厦门', '莆田', '三明', '泉州'] + }, column4: [ { - values: Object.keys(citys), + values: ['浙江', '福建'], className: 'column1' }, { - values: citys['浙江'], + values: ['杭州', '宁波', '温州', '嘉兴', '湖州'], className: 'column2', defaultIndex: 2 } @@ -39,6 +42,7 @@ Page({ onChange2(event) { const { picker, value } = event.detail; - picker.setColumnValues(1, citys[value[0]]); + picker.setColumnValues(1, this.data.column3[value[0]]); + getApp().picker = picker; } }); diff --git a/packages/picker-column/index.less b/packages/picker-column/index.less index 0bf3221c..d986b4fc 100644 --- a/packages/picker-column/index.less +++ b/packages/picker-column/index.less @@ -1,12 +1,7 @@ @import '../common/style/var'; -:host { - overflow: hidden; -} - .van-picker-column { - width: 100%; - overflow: visible; + overflow: hidden; font-size: 16px; text-align: center; diff --git a/packages/picker-column/index.ts b/packages/picker-column/index.ts index 2ce007a2..ede4efca 100644 --- a/packages/picker-column/index.ts +++ b/packages/picker-column/index.ts @@ -1,13 +1,7 @@ import { VantComponent } from '../common/component'; import { isObj, range } from '../common/utils'; -function isDisabled(option: any) { - return isObj(option) && option.disabled; -} - -function getOptionText(option: any, valueKey: string) { - return isObj(option) && valueKey in option ? option[valueKey] : option; -} +const DEFAULT_DURATION = 200; VantComponent({ classes: ['active-class'], @@ -23,18 +17,17 @@ VantComponent({ }, defaultIndex: { type: Number, - value: 0, - observer(value) { - this.setIndex(value); - } + value: 0 } }, data: { + startY: 0, offset: 0, + duration: 0, + startOffset: 0, options: [], - currentIndex: 0, - animation: false + currentIndex: 0 }, created() { @@ -43,38 +36,71 @@ VantComponent({ this.set({ currentIndex: defaultIndex, options: initialOptions - }).then(() => this.setIndex(defaultIndex)); + }).then(() => { + this.setIndex(defaultIndex); + }); + }, + + computed: { + count() { + return this.data.options.length; + }, + + baseOffset() { + const { data } = this; + return (data.itemHeight * (data.visibleItemCount - 1)) / 2; + }, + + wrapperStyle() { + const { data } = this; + return [ + `transition: ${data.duration}ms`, + `transform: translate3d(0, ${data.offset + data.baseOffset}px, 0)`, + `line-height: ${data.itemHeight}px` + ].join('; '); + } + }, + + watch: { + defaultIndex(value: number) { + this.setIndex(value); + } }, methods: { - onChange(event: Weapp.Event) { - if (!event.detail.source) { - return; - } - - this.offset = event.detail.y; + onTouchStart(event: Weapp.TouchEvent) { + this.set({ + startY: event.touches[0].clientY, + startOffset: this.data.offset, + duration: 0 + }); }, - onTouchStart() { - // open animate at first touch - if (!this.data.animation) { - this.set({ animation: true }); - } + onTouchMove(event: Weapp.TouchEvent) { + const { data } = this; + const deltaY = event.touches[0].clientY - data.startY; + this.set({ + offset: range( + data.startOffset + deltaY, + -(data.count * data.itemHeight), + data.itemHeight + ) + }); }, onTouchEnd() { - const { options = [], itemHeight, offset } = this.data; - - if (this.offset === offset) { - return; + const { data } = this; + if (data.offset !== data.startOffset) { + this.set({ + duration: DEFAULT_DURATION + }); + const index = range( + Math.round(-data.offset / data.itemHeight), + 0, + data.count - 1 + ); + this.setIndex(index, true); } - - const index = range( - Math.round(-this.offset / itemHeight), - 0, - options.length - 1 - ); - this.setIndex(index, true); }, onClickItem(event: Weapp.Event) { @@ -83,27 +109,33 @@ VantComponent({ }, adjustIndex(index: number) { - const { options = [] } = this.data; - const count = options.length; - index = range(index, 0, count); - - for (let i = index; i < count; i++) { - if (!isDisabled(options[i])) return i; + const { data } = this; + index = range(index, 0, data.count); + for (let i = index; i < data.count; i++) { + if (!this.isDisabled(data.options[i])) return i; } for (let i = index - 1; i >= 0; i--) { - if (!isDisabled(options[i])) return i; + if (!this.isDisabled(data.options[i])) return i; } - return 0; + }, + + isDisabled(option: any) { + return isObj(option) && option.disabled; + }, + + getOptionText(option: any) { + const { data } = this; + return isObj(option) && data.valueKey in option + ? option[data.valueKey] + : option; }, setIndex(index: number, userAction: boolean) { - const { itemHeight, currentIndex } = this.data; - index = this.adjustIndex(index); - const offset = -index * itemHeight; + const { data } = this; + index = this.adjustIndex(index) || 0; + const offset = -index * data.itemHeight; - this.offset = offset; - - if (index !== currentIndex) { + if (index !== data.currentIndex) { return this.set({ offset, currentIndex: index }).then(() => { userAction && this.$emit('change', index); }); @@ -113,17 +145,18 @@ VantComponent({ }, setValue(value: string) { - const { options = [], valueKey } = this.data; - - const index = options.findIndex( - (item: any) => getOptionText(item, valueKey) === value - ); - return index !== -1 ? this.setIndex(index) : Promise.resolve(); + const { options } = this.data; + for (let i = 0; i < options.length; i++) { + if (this.getOptionText(options[i]) === value) { + return this.setIndex(i); + } + } + return Promise.resolve(); }, getValue() { - const { options = [], currentIndex } = this.data; - return options[currentIndex]; + const { data } = this; + return data.options[data.currentIndex]; } } }); diff --git a/packages/picker-column/index.wxml b/packages/picker-column/index.wxml index 6bf7b3fd..d0ecb33c 100644 --- a/packages/picker-column/index.wxml +++ b/packages/picker-column/index.wxml @@ -1,27 +1,31 @@ - - - - + {{ item && item[valueKey] ? item[valueKey] : item }} - - + >{{ getOptionText(option, valueKey) }} + + + + +function isObj(x) { + var type = typeof x; + return x !== null && (type === 'object' || type === 'function'); +} + +module.exports = function (option, valueKey) { + return isObj(option) && option[valueKey] ? option[valueKey] : option; +} + diff --git a/packages/picker/README.md b/packages/picker/README.md index f3252ddb..cb5bd6c3 100644 --- a/packages/picker/README.md +++ b/packages/picker/README.md @@ -117,7 +117,7 @@ Page({ ```javascript const citys = { - '浙江': ['杭州', { text: '宁波', disabled: true }, '温州', '嘉兴', '湖州'], + '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'], '福建': ['福州', '厦门', '莆田', '三明', '泉州'] }; diff --git a/packages/picker/index.wxml b/packages/picker/index.wxml index 3a30aaf8..2a9cead2 100644 --- a/packages/picker/index.wxml +++ b/packages/picker/index.wxml @@ -32,17 +32,17 @@ catch:touchmove="noop" >