vue实现横向瀑布流;vue实现瀑布流及无限加载

2024-05-11 0 419

vue实现横向瀑布流;vue实现瀑布流及无限加载

介绍

瀑布流是一种常见的页面布局方式,可以实现图片或其他元素的动态展示。我们将使用Vue框架来实现横向瀑布流布局,并添加无限加载功能。

实现横向瀑布流

我们需要创建一个Vue组件来呈现瀑布流布局。在该组件中,我们将使用CSS Grid布局来实现横向排列。

```html

vue实现横向瀑布流;vue实现瀑布流及无限加载

{{ item.title }}

export default {

data() {

return {

items: [

{ id: 1, title: 'Item 1', imageUrl: 'image1.jpg' },

{ id: 2, title: 'Item 2', imageUrl: 'image2.jpg' },

{ id: 3, title: 'Item 3', imageUrl: 'image3.jpg' },

// 添加更多的数据项

]

};

}

};

.waterfall {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

grid-gap: 20px;

.item {

border: 1px solid #ccc;

padding: 10px;

text-align: center;

.title {

margin-top: 10px;

```

在上述代码中,我们使用`v-for`指令来遍历数据项,并使用`grid-template-columns`属性来指定每个子项的宽度。通过`repeat(auto-fill, minmax(300px, 1fr))`,我们可以实现自动填充容器,并保持每个子项的最小宽度为300px。

实现无限加载

接下来,我们将添加无限加载功能,以实现在滚动时动态加载更多的数据项。

```html

vue实现横向瀑布流;vue实现瀑布流及无限加载

{{ item.title }}

Loading...

export default {

data() {

return {

items: [

{ id: 1, title: 'Item 1', imageUrl: 'image1.jpg' },

{ id: 2, title: 'Item 2', imageUrl: 'image2.jpg' },

{ id: 3, title: 'Item 3', imageUrl: 'image3.jpg' },

// 添加更多的数据项

],

visibleItems: [],

loading: false

};

},

mounted() {

this.loadMore();

},

methods: {

loadMore() {

if (this.loading) return;

this.loading = true;

// 模拟异步加载数据

setTimeout(() => {

const start = this.visibleItems.length;

const end = start + 10; // 每次加载10个数据项

this.visibleItems = this.visibleItems.concat(this.items.slice(start, end));

this.loading = false;

}, 1000);

}

}

};

.waterfall {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

grid-gap: 20px;

height: 300px; /* 设置容器高度,以便触发滚动 */

overflow-y: scroll;

.item {

border: 1px solid #ccc;

padding: 10px;

text-align: center;

.title {

margin-top: 10px;

.loading {

text-align: center;

margin-top: 20px;

```

在上述代码中,我们通过给容器添加滚动事件监听器`@scroll`,并在`loadMore`方法中实现数据的异步加载。每次滚动到底部时,我们将加载更多的数据项,并将其追加到`visibleItems`数组中。

我们添加了一个加载中的提示,并通过`loading`变量来控制其显示与隐藏。

通过以上步骤,我们成功地使用Vue框架实现了横向瀑布流布局,并添加了无限加载功能。通过使用CSS Grid布局和Vue的响应式数据绑定,我们可以轻松地创建出动态展示内容的页面布局。

希望对你理解Vue的使用和实现瀑布流布局有所帮助。如果你有任何问题或疑问,请随时提问。

Image

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载

发表评论
暂无评论