VVS
VVS
  • 发布:2025-06-16 21:50
  • 更新:2025-06-25 23:14
  • 阅读:149

uniapp微信小程序skyline渲染下怎么使用skyline的draggable-sheet组件怎么使用

分类:uni-app
<template> <scroll-view style="height: 100%"> <!-- DraggableSheet 组件 --> <draggable-sheet id="sheet" class="sheet" initial-child-size="0.01" min-child-size="0" max-child-size="1" snap

snap-sizes="[0.4, 0.8]">

<scroll-view style="height: 100%" scroll-y type="list" associative-container="draggable-sheet" bounces>

<view v-for="n in 20" :key="n" style="padding: 10px; border-bottom: 1px solid #eee">Item {{ n }}</view>  

</scroll-view>
</draggable-sheet>
</scroll-view>
</template>

<script>
export default {
onLoad() {
// 在页面 onReady 时获取组件上下文并展开到 80%
uni
.createSelectorQuery()
.select("#sheet")
.node((res) => {
if (res && res.node) {
const sheetCtx = res.node;
sheetCtx.scrollTo({ size: 0.8 });
}
})
.exec();
},
};
</script>

<style>
.sheet {
background-color: #f5f5f5;
}
</style>

2025-06-16 21:50 负责人:无 分享
已邀请:
DCloud_UNI_JBB
  • VVS (作者)

    不生效啊,是我的写法有问题吗?

    2025-06-16 22:50

  • VVS (作者)

    上传了附件代码,版本也是最新的

    2025-06-16 22:52

  • DCloud_UNI_JBB

    回复 VVS: 你试试原生微信小程序呢?对比下uni-app的编译产物是否正确,看看是你的写法有问题,还是uni-app编译有问题。

    2025-06-17 10:10

VVS

VVS (作者)

这个是vue文件

5***@qq.com

5***@qq.com

试一下这个方法:
......
const sheetContext = ref(null)

onMounted(() => {
getContext()
})

const showHotel = () => {
expand()
}

const getContext = () => {
uni.createSelectorQuery()
.select(".sheet")
.node()
.exec(res => {
sheetContext.value = res[0].node
console.info('sheetContext: ', sheetContext.value)
})
}

const expand = () => {
const size = 0.5
sheetContext.value.scrollTo({
size,
pixels: 600,
animated: true,
duration: 300,
easingFunction: 'ease'
})
}

要回复问题请先登录注册