feat(lenticular-card): 接入 ManualTiltSlider + 修 touchend 行为
- 新增 showSlider / sliderValue props - 新增 update:sliderValue / sliderReset emits(v-model 配套) - 触摸结束不再 emit (0,0),与滑块数据驱动相容 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
86a5fdfbb5
commit
c3b423cf23
@ -45,11 +45,19 @@
|
||||
<text v-if="approximatePreview" class="tilt-hint-sub">叠化近似预览(倾斜或拖动体验光栅效果)</text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<ManualTiltSlider
|
||||
v-if="showSlider"
|
||||
:value="sliderValue"
|
||||
@change="v => emit('update:sliderValue', v)"
|
||||
@reset="emit('sliderReset')"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
|
||||
import ManualTiltSlider from './ManualTiltSlider.vue'
|
||||
|
||||
const props = defineProps({
|
||||
layers: { type: Array, required: true },
|
||||
@ -60,8 +68,13 @@ const props = defineProps({
|
||||
tiltHintText: { type: String, default: '倾斜手机预览' },
|
||||
/** 条纹高光中线不透明度 0~1,略提可增强光栅「栅感」 */
|
||||
shimmerMidOpacity: { type: Number, default: 0.1 },
|
||||
// 新增:手动滑块接入(spec §3.3)
|
||||
showSlider: { type: Boolean, default: false },
|
||||
sliderValue: { type: Number, default: 0.5 },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['simulate', 'update:sliderValue', 'sliderReset'])
|
||||
|
||||
/** Vue3 + uni:createSelectorQuery().in() 必须传组件 public 实例(proxy),传 internal instance 会运行时报错导致整页白屏 */
|
||||
const pageProxy = getCurrentInstance()?.proxy
|
||||
|
||||
@ -208,7 +221,9 @@ function onFrameTouchMove(e) {
|
||||
|
||||
function onFrameTouchEnd() {
|
||||
if (props.skipBuiltInTouch) return
|
||||
emit('simulate', 0, 0)
|
||||
// 修改前:emit('simulate', 0, 0) ← 与滑块数据驱动冲突
|
||||
// 修改后:触摸结束不再强制发 (0,0),由调用方决定
|
||||
// (spec §4.1 修复方案)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user