Svelte Native平板端水平ListView实现求助

Svelte Native的默认listView仅支持垂直排列，要实现水平列表，推荐用scrollView配合flexbox布局来替代，同时修正你使用#each时的语法问题：

完整可行代码示例 #

<scrollView orientation="horizontal">
    <flexLayout flexDirection="row">
        {#each listOfItems as item}
            <button 
                on:tap={() => addToList(item)} 
                text="{item.name}" 
                class="prod-btn" 
            />
        {/each}
    </flexLayout>
</scrollView>

<script>
    // 示例对象列表
    let listOfItems = [
        { name: "商品A" },
        { name: "商品B" },
        { name: "商品C" },
        { name: "商品D" }
    ];

    function addToList(item) {
        // 这里添加点击后的逻辑，比如加入列表
        console.log("选中商品:", item);
    }
</script>

<style>
    .prod-btn {
        min-width: 140px;
        margin: 0 10px;
        padding: 8px 16px;
    }
</style>

关键说明 #

1. 横向滚动容器：用scrollView并设置orientation="horizontal"，实现可横向滚动的容器
2. 水平排列布局：内部嵌套flexLayout，通过flexDirection="row"让子元素水平排列
3. 修正#each错误：
   • 你之前的代码{#each one as ones}中，one并非你的数据源变量，要替换为实际的列表变量（比如listOfItems）
   • on:tap={addToList(ones)}会在组件初始化时直接执行函数，应改为on:tap={() => addToList(item)}，确保只有点击时才触发
4. 样式优化：给按钮设置min-width、内外边距，保证每个列表项的显示效果和间距

为什么你之前的#each代码无内容显示 #

• 数据源变量名错误，导致循环没有遍历到有效数据
• on:tap的写法错误，直接调用函数可能引发异常，阻断了组件渲染

内容的提问来源于stack exchange，提问作者Shxs