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