这两天在搞峡谷流产业布局，后端用的vue，掰刺了很久，却是失利收场，网路上也搜寻了数个计划和提议，结论我那个大白菜依然未予的欢欣。
跋山涉水，看见两个网民所推荐了两个应用程序，真的极好，站在勇士手臂上，的确随心所欲多了。
应用程序上场：vue-waterfall-easy
最简单蛮横的形式，JS导入
总之了，你也能采用npm加装
npm install vue-waterfall-easy --save-dev
new Vue({
el : app,
components: {
vueWaterfallEasy
}
})
采用import提及
import vueWaterfallEasy from vue-waterfall-easy
new Vue({
el : app,
components: {
vueWaterfallEasy
}
})
在做峡谷流产业布局的时候，采用呢｛图片+标题｝的模式，所以采用了插槽，以及手动调用了取消滚动加载
一定要记得在组件上加上ref=waterfall，否则会undefined的
在 slot-scope="props"的div里，能自定义修改每个图片所需要的信息
{{props.value.name}}
:src="props.value.isDianZan == 0 ? https://g-shot.oss-cn-hangzhou.aliyuncs.com/h5/28ac6d226cb5526e/img/6-32.png: https://g-shot.oss-cn-hangzhou.aliyuncs.com/h5/28ac6d226cb5526e/img/6-31.png">
已经到底啦
import vueWaterfallEasy from ./vue-waterfall-easy/vue-waterfall-easy.vue
import axios from axios
export default {
name: app,
data() {
return {
imgsArr: [],
group: 0, // request param
}
},
components: {
vueWaterfallEasy
},
methods: {
getData() {
axios.get(./static/mock/data.json?group= + this.group) // 真实环境中，后端会根据参数group返回新的图片数组，这里我用两个惊呆json文件模拟
.then(res => {
this.imgsArr = this.imgsArr.concat(res.data)
this.group++
})
},
},
created() {
this.getData()
}
}
这里要注意，存图片链接的关键字必须是src,所以new了两个类来存所有从接口取到的要用到的值。
export class Img {
constructor({
id,
src,
isDianZan,
name
}) {
this.id = id
this.src = src
this.isDianZan = isDianZan
this.name = name
}
}
export function CreateImg(imgData) {
return new Img({
id: imgData.id,
src: imgData.src,
isDianZan: imgData.isDianZan,
name: imgData.name
})
}
评论已关闭！