Skip to content

Commit 0dd330c

Browse files
yangxiaolu1993lkjh3214lkjh3214szg2008richard1015
authored
fix: picker组件重影问题修复 (#1428)
* fix: marge主分支 (#1) * doc: calendar 文档修改 (#1410) * feat: 添加range组件、calendar组件在线文档 * fix: 文档调整 * fix: 重构calendar组件 * feat: 日历组件重构，文档修改，功能完善 * fix: 格式化 * fix: 代码格式化调整。 * fix: 去除无用代码 * fix: 文档调整 * fix: 文档调整 * fix: taro demo 样式修改 * feat: range组件功能完善，新增 竖向操作，刻度展示。 * fix: 冲突解决 * feat: taro功能新增，兼容处理，文档修改 * feat: 添加range组件，jdt主题色 * fix: 修改组件初始化逻辑 * feat: 新增h5 日期多选功能 * feat: taro版本添加 日期多选功能 * fix: 修复多选，无法选中开头结尾日期问题 * fix: 文档修改，添加en-US 文档 * fix: 文档完善 Co-authored-by: lkjh3214 <[email protected]> Co-authored-by: love_forever <[email protected]> * feat: imagepreview 部分功能补齐 (#1412) * feat: image新增单元测试 * feat: ellipsis添加单元测试 * feat: imagepreview 添加 * fix: popop单元测试修改 * docs: 添加版本号 * feat: support highlight for JetBrains web-types * test(imagepreview): edit snap * fix(image): dts edit import * docs(input): demo和md国际化文案修改 (#1414) * fix: 抽离 input ConfirmTextType * feat: input、switch国际化 * feat: category、address国际化 * feat: taro升级maxlength问题 * fix: 国际化增加默认字段 * fix: blank * fix: input组件国际化文案修改 * style: add ellipsis add sass * docs(elevator): 增加吸顶props * feat: input组件新增input slot插槽 (#1418) * fix: 抽离 input ConfirmTextType * feat: input、switch国际化 * feat: category、address国际化 * feat: taro升级maxlength问题 * fix: 国际化增加默认字段 * fix: blank * fix: input组件国际化文案修改 * feat: input组件新增input slot插槽 * release: v3.1.22 * Update README.md add alipay img * Update README.md * docs: changelog 3.1.22 Co-authored-by: lkjh3214 <[email protected]> Co-authored-by: lkjh3214 <[email protected]> Co-authored-by: love_forever <[email protected]> Co-authored-by: richard1015 <[email protected]> Co-authored-by: ailululu <[email protected]> Co-authored-by: snandy <[email protected]> * feat: imagepreview重复问题修改 * fix: picker 组件重影问题修改 * fix: 科技样式同步 Co-authored-by: lkjh3214 <[email protected]> Co-authored-by: lkjh3214 <[email protected]> Co-authored-by: love_forever <[email protected]> Co-authored-by: richard1015 <[email protected]> Co-authored-by: ailululu <[email protected]> Co-authored-by: snandy <[email protected]>
1 parent 5a09117 commit 0dd330c

File tree

8 files changed

+84
-41
lines changed

8 files changed

+84
-41
lines changed

‎src/packages/__VUE/picker/Column.vue

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<template>
22
<view class="nut-picker__list" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
33
<view class="nut-picker-roller" ref="roller" :style="touchRollerStyle">
4-
<view
5-
class="nut-picker-roller-item"
6-
:class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
7-
v-for="(item, index) in column"
8-
:style="setRollerStyle(index + 1)"
9-
:key="item.value ? item.value : index"
10-
>
11-
{{ item.text }}
12-
</view>
4+
<template v-for="(item, index) in column" :key="item.value ? item.value : index">
5+
<view
6+
class="nut-picker-roller-item"
7+
:class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
8+
:style="setRollerStyle(index + 1)"
9+
v-if="item && item.text"
10+
>
11+
{{ item.text }}
12+
</view>
13+
</template>
1314
</view>
15+
<view class="nut-picker-roller-mask"></view>
1416

15-
<view class="nut-picker-content">
17+
<!-- <view class="nut-picker-content">
1618
<view class="nut-picker-list-panel" ref="list" :style="touchListStyle">
1719
<view
1820
:class="['nut-picker-item', 'nut-picker-item-ref', item.className]"
@@ -22,7 +24,7 @@
2224
</view>
2325
<view class="nut-picker-placeholder" v-if="column && column.length === 1"></view>
2426
</view>
25-
</view>
27+
</view> -->
2628
</view>
2729
</template>
2830
<script lang="ts">
@@ -118,6 +120,7 @@ export default create({
118120
let move = state.touchParams.lastY - state.touchParams.startY;
119121
120122
let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
123+
console.log('touchEnd', move, moveTime);
121124
if (moveTime <= 300) {
122125
move = move * 2;
123126
moveTime = moveTime + 1000;
@@ -151,6 +154,7 @@ export default create({
151154
};
152155
153156
const setMove = (move: number, type?: string, time?: number) => {
157+
console.log('setMove');
154158
let updateMove = move + state.transformY;
155159
if (type === 'end') {
156160
// 限定滚动距离
@@ -164,6 +168,7 @@ export default create({
164168
// 设置滚动距离为lineSpacing的倍数值
165169
let endMove = Math.round(updateMove / state.lineSpacing) * state.lineSpacing;
166170
let deg = `${(Math.abs(Math.round(endMove / state.lineSpacing)) + 1) * state.rotation}deg`;
171+
167172
setTransform(endMove, type, time, deg);
168173
169174
let t = time ? time / 2 : 0;
@@ -174,14 +179,25 @@ export default create({
174179
state.currIndex = Math.abs(Math.round(endMove / state.lineSpacing)) + 1;
175180
} else {
176181
let deg = '0deg';
182+
let degNum = 0;
177183
if (updateMove < 0) {
178-
deg = `${(Math.abs(updateMove / state.lineSpacing) + 1) * state.rotation}deg`;
184+
degNum = (Math.abs(updateMove / state.lineSpacing) + 1) * state.rotation;
179185
} else {
180-
deg = `${(-updateMove / state.lineSpacing + 1) * state.rotation}deg`;
186+
degNum = (-updateMove / state.lineSpacing + 1) * state.rotation;
181187
}
182188
183-
setTransform(updateMove, null, undefined, deg);
184-
state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
189+
// picker 滚动的最大角度
190+
const maxDeg = (props.column.length + 1) * state.rotation;
191+
const minDeg = 0;
192+
if (degNum > maxDeg) {
193+
deg = `${maxDeg}deg`;
194+
} else if (degNum < minDeg) {
195+
deg = `${minDeg}deg`;
196+
} else {
197+
deg = `${degNum}deg`;
198+
setTransform(updateMove, null, undefined, deg);
199+
state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
200+
}
185201
}
186202
};
187203
@@ -202,6 +218,7 @@ export default create({
202218
watch(
203219
() => props.column,
204220
(val) => {
221+
console.log('props.column变化', props.column);
205222
state.transformY = 0;
206223
modifyStatus(false);
207224
},
@@ -210,16 +227,16 @@ export default create({
210227
}
211228
);
212229
213-
watch(
214-
() => props.value,
215-
(val) => {
216-
console.log('列更新', val);
217-
modifyStatus(true);
218-
},
219-
{
220-
deep: true
221-
}
222-
);
230+
// watch(
231+
// () => props.value,
232+
// (val) => {
233+
// console.log('props.value变化')
234+
// modifyStatus(true);
235+
// },
236+
// {
237+
// deep: true
238+
// }
239+
// );
223240
224241
onMounted(() => {
225242
modifyStatus(true);

‎src/packages/__VUE/picker/ColumnTaro.vue

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
{{ item.text }}
1212
</view>
1313
</view>
14-
15-
<view class="nut-picker-content">
14+
<view class="nut-picker-roller-mask"></view>
15+
<!-- <view class="nut-picker-content">
1616
<view class="nut-picker-list-panel" ref="list" :id="'list' + refRandomId" :style="touchListStyle">
1717
<view
1818
:class="['nut-picker-item', 'nut-picker-item-ref', item.className]"
@@ -22,7 +22,7 @@
2222
</view>
2323
<view class="nut-picker-placeholder" v-if="column && column.length === 1"></view>
2424
</view>
25-
</view>
25+
</view> -->
2626
</view>
2727
</template>
2828
<script lang="ts">
@@ -177,13 +177,25 @@ export default create({
177177
state.currIndex = Math.abs(Math.round(endMove / state.lineSpacing)) + 1;
178178
} else {
179179
let deg = '0deg';
180+
let degNum = 0;
180181
if (updateMove < 0) {
181-
deg = `${(Math.abs(updateMove / state.lineSpacing) + 1) * state.rotation}deg`;
182+
degNum = (Math.abs(updateMove / state.lineSpacing) + 1) * state.rotation;
183+
} else {
184+
degNum = (-updateMove / state.lineSpacing + 1) * state.rotation;
185+
}
186+
187+
// picker 滚动的最大角度
188+
const maxDeg = (props.column.length + 1) * state.rotation;
189+
const minDeg = 0;
190+
if (degNum > maxDeg) {
191+
deg = `${maxDeg}deg`;
192+
} else if (degNum < minDeg) {
193+
deg = `${minDeg}deg`;
182194
} else {
183-
deg = `${(-updateMove / state.lineSpacing + 1) * state.rotation}deg`;
195+
deg = `${degNum}deg`;
196+
setTransform(updateMove, null, undefined, deg);
197+
state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
184198
}
185-
setTransform(updateMove, null, undefined, deg);
186-
state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
187199
}
188200
};
189201
@@ -202,8 +214,8 @@ export default create({
202214
};
203215
204216
const getReference = async () => {
205-
const refe = await useTaroRect(list, Taro);
206-
state.lineSpacing = refe.height / props.column.length;
217+
// const refe = await useTaroRect(list, Taro);
218+
// state.lineSpacing = refe.height / props.column.length;
207219
modifyStatus(true);
208220
};
209221

‎src/packages/__VUE/picker/doc.en.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const Internation = {
3434
ouHai: '瓯海区',
3535
fuJian: '福建',
3636
fuZhou: '福州',
37+
xiaMen: '厦门',
3738
guLou: '鼓楼区',
3839
taiJiang: '台江区',
3940
siMing: '思明区',
@@ -74,6 +75,7 @@ export const Internation = {
7475
ouHai: 'OuHai',
7576
fuJian: 'FuJian',
7677
fuZhou: 'FuZhou',
78+
xiaMen: 'XiaMen',
7779
guLou: 'GuLou',
7880
taiJiang: 'TaiJiang',
7981
siMing: 'SiMing',

‎src/packages/__VUE/picker/index.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,19 @@
9898
}
9999
}
100100

101+
&-roller-mask {
102+
position: absolute;
103+
width: 100%;
104+
display: block;
105+
height: 100%;
106+
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)),
107+
linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
108+
background-repeat: no-repeat;
109+
background-position: top, bottom;
110+
background-size: 100% 108px;
111+
z-index: 1;
112+
}
113+
101114
&-content {
102115
display: block;
103116
position: absolute;

‎src/packages/__VUE/picker/index.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
<slot name="top"></slot>
2424

25-
<view class="nut-picker__column">
25+
<view class="nut-picker__column" ref="wrapHeight">
2626
<view class="nut-picker__hairline"></view>
2727
<view class="nut-picker__columnitem" v-for="(column, columnIndex) in columnsList" :key="columnIndex">
2828
<nut-picker-column
@@ -94,6 +94,8 @@ export default create({
9494
// 选中项
9595
let defaultValues = ref<(number | string)[]>(props.modelValue);
9696
97+
const wrapHeight = ref();
98+
9799
const classes = computed(() => {
98100
const prefixCls = componentName;
99101
return {
@@ -201,7 +203,6 @@ export default create({
201203
};
202204
203205
onMounted(() => {
204-
console.log(11, props.modelValue);
205206
if (props.visible) state.show = props.visible;
206207
});
207208
@@ -212,7 +213,6 @@ export default create({
212213
watch(
213214
() => props.modelValue,
214215
(newValues) => {
215-
console.log('change', newValues, defaultValues.value);
216216
const isSameValue = JSON.stringify(newValues) === JSON.stringify(defaultValues.value);
217217
if (!isSameValue) {
218218
defaultValues.value = newValues;
@@ -235,7 +235,6 @@ export default create({
235235
watch(
236236
() => props.visible,
237237
(val) => {
238-
console.log('props更新', props.columns);
239238
state.show = val;
240239
}
241240
);

‎src/packages/styles/variables-jdb.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ $picker-bar-title-font-size: 16px !default;
231231
$picker-bar-title-color: $title-color !default;
232232
$picker-bar-title-font-weight: normal !default;
233233
$picker-item-height: 36px !default;
234-
$picker-item-text-color: #808080 !default;
234+
$picker-item-text-color: $title-color !default;
235235
$picker-item-active-text-color: inherit !default;
236236
$picker-item-text-font-size: 16px !default;
237237
$picker-item-active-line-border: 1px solid #d8d8d8 !default;

‎src/packages/styles/variables-jdt.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ $picker-bar-title-font-size: 18px !default;
149149
$picker-bar-title-color: #323233 !default;
150150
$picker-bar-title-font-weight: 600 !default;
151151
$picker-item-height: 36px !default;
152-
$picker-item-text-color: #808080 !default;
152+
$picker-item-text-color: $title-color !default;
153153
$picker-item-active-text-color: $primary-color !default;
154154
$picker-item-text-font-size: 16px !default;
155155
$picker-item-active-line-border: 1px solid rgba(0, 0, 0, 0.06) !default;

‎src/packages/styles/variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ $picker-bar-title-font-size: 16px !default;
162162
$picker-bar-title-color: $title-color !default;
163163
$picker-bar-title-font-weight: normal !default;
164164
$picker-item-height: 36px !default;
165-
$picker-item-text-color: #808080 !default;
165+
$picker-item-text-color: $title-color !default;
166166
$picker-item-active-text-color: inherit !default;
167167
$picker-item-text-font-size: 16px !default;
168168
$picker-item-active-line-border: 1px solid #d8d8d8 !default;

0 commit comments

Comments
 (0)