4个版本

0.1.3	2022年10月24日
0.1.2	2022年10月22日
0.1.1	2022年10月22日
0.1.0	2022年10月22日

#1086 in WebAssembly

49 monthly downloads

MIT/Apache

13KB
172 lines

✨Yew-InfiniteFor.rs✨

中文

Yew-InfiniteFor.rs 是一个为Yew提供的无限滚动列表组件。

🔥亮点🔥

支持函数组件样式！
可以智能地根据视图大小调整一次渲染的项目数量。
支持行模式和列模式。
并且，它很容易使用！

📑如何使用？📑

只需3个简单步骤，就像这样

获取 Yew-Canvas.rs！

#Cargo.toml
[dependencies]
yew="0.19"
yew-infinite-list="..."

在函数组件中创建一个 request 回调！

// This callback accept a Two-tuple:
// - n: usize: the serial number of the item
// - ret: Callback<Html>: Html setter of the item
let request = Callback::from(|(n, ret): (usize, Callback<Html>)| {
    gloo::console::log!("Tag ", n, " rendered!");
    ret.emit(html!(
        <h1>
            {format!("This is tag {n}")}
        </h1>
    ))
});

将组件作为 InfiniteFor 返回！

html! {
    <div
        // You have to be sure `InfiniteFor` can be overflow.
        // Generally this is not a problem in other components.
        // If you plan to put `InfiniteFor` directly in the
        // `body`, you can use a style like this:
        style="\
            height: 100vh;\
            width: 100vw;\
        "
    >
        <InfiniteFor
            // use this attribute to switch mode from column to row
            is_direction_row={true}
            // use this callback to offer Html of the items
            {request}
        >
            // children is the load sign
            // at the bottom of the page
            <h4>
                { "This is the end of page\n这里是页面底部" }
            </h4>
        </InfiniteFor>
    </div>
}

👌运行示例👌

这需要您事先设置 Yew.rs 开发环境，以下是一个 Trunk 打包示例
cd./examples/base-use
trunk server

⚖️许可证⚖️

Yew-InfiniteFor.rs 在MIT许可证和Apache许可证（版本2.0）下双许可。

依赖关系

~12MB
~222K SLoC