vue-stick
Version:
基于 vue 的瀑布流组件
187 lines (180 loc) • 8.19 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Stick demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #333;
}
.container {
position: relative;
min-height: 1000px;
margin: 40px 40px;
}
.tools {
padding: 20px;
text-align: center;
background: #555
}
.footer {
height: 400px;
background: #555;
}
.card {
background: #fff;
}
.card img {
display: block;
width: 100%;
background: #aaa;
}
.card h2 {
margin: 0;
padding: 10px 15px;
font-size: 18px;
}
.card p {
margin: 0;
padding: 10px 15px;
font-size: 14px;
}
</style>
</head>
<body>
<div id="app"></div>
<div class="footer"></div>
<script src="vue.min.js"></script>
<script type="text/javascript" src="../dist/vue-stick.umd.js"></script>
<script>
// Vue.use(Stick)
// 需要编译器
new Vue({
el: '#app',
data: {
isLoading: false,
isEnd: false,
list: [
{
"title": "合肥城中村 - 全景摄影计划",
"cover": "http://static.bh-lay.com/blog/village-in-city/城中村仰视.jpg",
"intro": "小剧将会在接下来的时间里，去寻找、发现、并拍摄合肥市现存的城中村。其实城市变化很快，只是我们身在变化之中感受不强而已。我希望可以借助于影像的力量，凝固住一个个城中村最后的身姿。"
},
{
"title": "为什么小剧客栈没有友情链接",
"cover": "",
"intro": "熟悉小剧的同学应该都知道，小剧客栈上面没有友情链接这样一个东西。很多朋友问过小剧这个问题，我也给过很多版本的原因，今天就来详细说一下为什么小剧客栈没有友情链接。"
},
{
"cover": "http://static.bh-lay.com/blog/2018-summary/share.jpg",
"intro": "2018 年对于我来说是非常特殊的一年，一整年工作强度非常大，但依旧会抽出时间去寻找自己的诗和远方。这一年在业余生活上做了很多从未有过的尝试，也因为一些兴趣爱好结交到一帮有趣的小伙伴。",
"title": "剧中人的2018年终总结"
},
{
"cover": "http://static.bh-lay.com/blog/2018-bi-layout/layout-data-model.png",
"intro": "今天的分享主要围绕 可视化布局模块 的一些工作，本文主要从可视化布局模块的交互逻辑的设计上展开，并未涉及到具体代码实现，作为 Odeon 大数据平台在可视化布局模块的一些思路。",
"title": "可视化布局模块开发分享"
},
{
"cover": "http://static.bh-lay.com/blog/2018-iflytek-shushan/topic-graphy.jpg",
"intro": "大蜀山登顶活动是讯飞历次周年庆必有的活动，第一次参加公司全员的登山活动还是挺兴奋的。有幸的是这次小剧是以航拍摄影的身份参与周年庆，简单记录下小剧在登山活动上的一些事，与大家分享。",
"title": "讯飞19周年庆拍摄小记"
},
{
"cover": "http://static.bh-lay.com/blog/2018-720yun/take-the-prize.jpg",
"intro": "上周五，小剧脑袋一热请假去了趟北京，千里迢迢去参加了720云主办的产品发布会。按说这类发布会在家看直播更有意思，为什么小剧要劳民伤财的跑到现场去呢？",
"title": "720云产品发布会小记"
},
{
"author": "",
"cover": "http://static.bh-lay.com/blog/2018-album/yangpuwujiaochang.jpg",
"intro": "最近闲着无聊，整理了自己觉得还算看得过去的照片，特意挑出五张印刷了二十套。假模假式的拆掉四套照片，模仿着大神的方式做了下签名。", "title": "记一次「随意」的照片赠送"
},
{
"cover": "http://static.bh-lay.com/blog/webpack-async-module/cover.jpg",
"intro": "虽然项目代码经过打包压缩并且有拆分，但是页面在初始化时，这些资源都会一股脑地被加载到页面中。随着项目越来越大，滚雪球效应导致首屏加载时长的问题会越来越明显。因此适当的剥离部分模块，在需要使用的时候按需加载显得格外重要。",
"title": "Webpack 异步模块实现"
},
{
"cover": "http://static.bh-lay.com/blog/see-hefei/cover-2.jpg",
"intro": "再次见到合肥，在历经五年的沪漂之后，以一种渴望被接纳的姿态来到合肥。这篇文章作为【上海 · 再见】的下篇，原计划在2017年9月前后完成。很遗憾一直拖到了四个月后的2018年。既然已经拖了这么久，索性就当作2017年全年回顾好了。以八月为分界线，聊聊小剧这一年的经历。",
"title": "再见 · 合肥"
},
{
"author": "",
"cover": "http://static.bh-lay.com/blog/odeon-shoot/odeon-1.jpg",
"intro": "这次拍摄也只是小剧的处女作，并没有多少经验作指导，仅仅是根据自己的思路临场做的尝试。好在团队的小伙伴比较耐心，不厌其烦地微调位置，经过反复拍摄，最终完成了此次拍摄。",
"title": "记一次团队主题航拍"
}
]
},
components: {
Stick: Stick.component
},
template: '<div class="container">' +
'<Stick ' +
':list="list"' +
'@onScrollEnd="loadMore"' +
'>' +
'<template slot-scope="scope">' +
'<div class="card">' +
'<img :src="scope.data.cover" v-if="scope.data.cover" />' +
'<h2>{{scope.data.title}}</h2>' +
'<p>{{scope.data.intro}}</p>' +
// '<button @click="deleteItem(scope.data)">删除</button>' +
'</div>' +
'</template>' +
'</Stick>' +
'<div class="tools" >' +
'<div v-show="isLoading" >正在加载...</div>' +
'<div v-if="isEnd" >没有更多数据了</div><br/>' +
'<button v-if="!isEnd" @click="loadMore">加载更多</button>' +
'</div>' +
'</div>',
methods: {
deleteItem: function (data) {
var index = this.list.indexOf(data)
this.list.splice(index, 1)
},
loadMore: function () {
if (this.list.length > 60) {
this.isEnd = true
return
}
var me = this
this.isLoading = true
setTimeout(function () {
me.isLoading = false
me.list.push(
{
"title": "合肥城中村 - 全景摄影计划",
"cover": "http://static.bh-lay.com/blog/village-in-city/城中村仰视.jpg",
"intro": "小剧将会在接下来的时间里，去寻找、发现、并拍摄合肥市现存的城中村。其实城市变化很快，只是我们身在变化之中感受不强而已。我希望可以借助于影像的力量，凝固住一个个城中村最后的身姿。"
},
{
"title": "为什么小剧客栈没有友情链接",
"cover": "",
"intro": "熟悉小剧的同学应该都知道，小剧客栈上面没有友情链接这样一个东西。很多朋友问过小剧这个问题，我也给过很多版本的原因，今天就来详细说一下为什么小剧客栈没有友情链接。"
},
{
"cover": "http://static.bh-lay.com/blog/2018-bi-layout/layout-data-model.png",
"intro": "今天的分享主要围绕 可视化布局模块 的一些工作，本文主要从可视化布局模块的交互逻辑的设计上展开，并未涉及到具体代码实现，作为 Odeon 大数据平台在可视化布局模块的一些思路。",
"title": "可视化布局模块开发分享"
},
{
"cover": "http://static.bh-lay.com/blog/2018-iflytek-shushan/topic-graphy.jpg",
"intro": "大蜀山登顶活动是讯飞历次周年庆必有的活动，第一次参加公司全员的登山活动还是挺兴奋的。有幸的是这次小剧是以航拍摄影的身份参与周年庆，简单记录下小剧在登山活动上的一些事，与大家分享。",
"title": "讯飞19周年庆拍摄小记"
}
)
}, 1000)
}
}
})
</script>
</body>
</html>