lfyfly / vue-waterfall-easy Goto Github PK

点击卡片跳到详情页，通过路由退回后容器就从scroll为0的地方开始了，就想记录下滑动的y轴值 但是获取不到y值。。。

切换新的数据时，清空imgsArr， 数据没有变化

这个组件支持ssr后端渲染吗？我要做seo处理！

当路由切换进入时渲染无问题 当前页面刷新 块高度计算错误 产生重叠

因外层有了滚动条了，导致重复

现在的imgsArr中每个元素都要有src和href，我已经让每个元素有这两个属性了，不过除了这两个属性之外，还有很多其他属性，而基于每个元素里面的各种属性，我需要用自己的组件来呈现。
所以我希望把自定义组件放到默认的slot中，但是我看了例子并不知道如何把imgsArr中的当前元素传递到这个位置，而这个props里面好像也只有一个index属性。
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"> <my-component class="img-info" slot-scope="props"> //???? </my-component> </vue-waterfall-easy>

请指教，多谢！

代码：

结果：

说明：
版本：2.4.1

未添加waterfall-head插槽之前，一切正常。

求教， 当后台数据加载完毕后，即最后一次请求返回空，要怎么设置loading效果消失。

我在那种切换的列表，上面是一个切换列表，下面根据切换内容，切换子组件，但是子组件被盖住，不显示图片[图片]

1.vue-cli创建的项目，我把图片放到src里面 展示不了图片，放到static里面就可以，是怎么回事呢
2. 还有info怎么去掉 我在页面内重写了css，覆盖不了

谢谢！

Invalid prop: type check failed for prop "to". Expected String, Object, got Boolean

滚动到底部第一次触发事件，第二次加载数据后就不触发了

version 2.2.2

看了源码，height 只能传递数字（实际单位是像素），有点不方便。
可能有的需求是想设置 90vh，或者 100rem ，或者 calc(100vh - 200px)

具体改哪个？

如题，我遇到的问题是在开发h5页面时，用组件动态生成的页面中，会扩宽底部栏，把.vue-waterfall-easy所在的dom撑开，显示出横向的滚动条出来。我自己的解决办法是把宽度 width: 100%改成 width: 99.9%就好了。如下代码：

.vue-waterfall-easy {
  position: relative;
  width: 99.9%; // 移动端生效
}

我这个渣渣，按教程在vue里面一步一步写，全写完了，没报错，但是啥东西也没出来，console.log(res.data)也有数据出来
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
href
:
(...)
info
:
"一些图片描述文字"
src
:
(...)
_height
:
251
ob
:
Observer {value: {…}, dep: Dep, vmCount: 0}
get href
:
ƒ reactiveGetter()

可能有图片加载出错后，相应做某种判断和操作

“静态JSON文件”这里被打成惊呆JSON了

waterfall-over 的top值，在倒数第二个的位置，

正常应该在倒数第一个的top位置吧？

"vue-waterfall-easy": "^2.2.2",

使用相对定位，如果图集是对齐的，无法触发图片到底部自动更新的操作，如这个链接下是一个图集，
总共有90张照片，每次加载10张，加载到第2次后，后面无法再加载
https://www.nichuiniu.cn/wanhg/imgnum/486

滚动触底事件中有个小bug，部分极端高度下会发生，需要将判断条件修改下

母版页有navbar和footer元素，vue-waterfall-easy组件通过 router-view 以template形式加载，页面出现两个滚动条

如题

用的npm 的方式安装的vue-waterfall-easy，然后按照Basic example方式实现，运行时候控制台报错：
TypeError: Cannot read property 'src' of undefined
at eval (vueWaterfallEasy.js?6dc5:1)
at Array.forEach ()
at VueComponent.preload (vueWaterfallEasy.js?6dc5:1)
at VueComponent.imgsArr (vueWaterfallEasy.js?6dc5:1)
at Watcher.run (vue.esm.js?a026:3233)
at flushSchedulerQueue (vue.esm.js?a026:2981)
at Array.eval (vue.esm.js?a026:1837)
at flushCallbacks (vue.esm.js?a026:1758)

因为是初学者，不知道是不是缺少什么package的问题，还请麻烦解惑，谢谢

我们的功能是用户可以上传图片，为保证图片规范性，我们可能会需要限制图片最大或最小比例，这个功能应该向插件传什么参数呢？

How to handle the clicking event callback in the internal photo?

readme写的不清楚

hi
thansk for your plugin but when i use this, it's occur an error in
#error (compile error)
in .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!./~/vue-waterfall-easy/src/vue-waterfall-easy/vue-waterfall-easy.vue
Module build failed: ReferenceError: Unknown plugin "transform-vue-jsx" specified in "my file path"
node_modules/vue-waterfall-easy/.babelrc" at 0, attempted to resolve relative to "/node_modules/vue-waterfall-easy"
at /node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (//node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init /node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (//node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/node_modules/babel-loader/lib/index.js:49:20)

waiting your apply thanks

是否考虑图片加载失败后，可展示默认图片

Invalid default value for prop "imgsArr": Props with type Object/Array must use a factory function to return the default value.
官方文档写的：
// 对象或数组且一定会从一个工厂函数返回默认值

imgsArr和loadingDotStyle必须用函数返回。
loadingDotStyle: { type: Object, default: function () { return null; } },
imgsArr: { type: Array, required: true, default: function () { return []; } },

因为有些图片尺寸较大，先拿图片再加载有点慢，可否支持懒加载，或者说可以把img标签以slot暴露出来，我们自己做懒加载

Module build failed: ReferenceError: Unknown plugin "transform-vue-jsx" specified in "E:\Testing\mp-kite\node_modules\vue-waterfall-easy\.babelrc" at 0, attempted to resolve relative to "E:\Testing\mp-kite\node_modules\vue-waterfall-easy"
at E:\Testing\mp-kite\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (E:\Testing\mp-kite\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (E:\Testing\mp-kite\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
at OptionManager.init (E:\Testing\mp-kite\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (E:\Testing\mp-kite\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (E:\Testing\mp-kite\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (E:\Testing\mp-kite\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (E:\Testing\mp-kite\node_modules\babel-loader\lib\index.js:50:20)
at Object.module.exports (E:\Testing\mp-kite\node_modules\babel-loader\lib\index.js:173:20)

@ .//vue-waterfall-easy/src/vue-waterfall-easy/vue-waterfall-easy.vue 8:0-123
@ .//babel-loader/lib!./~/mpvue-loader/lib/selector.js?type=script&index=0!./src/pages/find-list/find-list.vue
@ ./src/pages/find-list/find-list.vue
@ ./src/pages/find-list/main.js

由于该组件使用了jsx语法，导致运行出错

就是能有个下拉刷新的功能!

请问下图片加载失败的情况，图片的高度怎么算的

我在使用这个插件的时候遇到这个错误，已经好多天了，一直解决不了。
这是我的代码：
<script>
new Vue({
el: "#app",
components: {
vueWaterfallEasy
},
data() {
return {
imgsArr: [],
fechImgsArr: [],
group: 1,
}
},
methods: {
getData () {
axios.get("http://122.114.227.186:8080/" + this.group)
.then(res => {
this.imgsArr = res.data
this.group++
console.log(res.data)
})
},
},
created() {
this.getData()
}
})
</script>
这是我的后端返回的json：

这是chrome console下的结果：

可以看到res.data是有Array(0)属性的。
我查了很久的google,不管是用for in重组数组还是重写后端返回的json都解决不了这个问题，我很烦恼，各位大大能帮忙看一下吗？

:srcKey="src" :hrefKey="src" 这两个参数无效啊老哥

大佬設置圖片寬度怎麼沒起效果？求教一下，謝謝。

data() {
return {
//圖片大小
imgsWidth: 80, ｝

• [email protected] add click event

• [email protected] add srcKey and hrefKey property

• [email protected] add isRouterLink property

• [email protected]
  add mobileGap property
  imgArr can be replaced to update

• [email protected]
  add waterfallOver method
  add water-over slot

• [email protected] add cardAnimationClass prop

• [email protected]
  add enablePullDown event
  add pullDownMove pullDownEnd event

• [email protected] 支持无图片链接仅文字可瀑布流布局

• [email protected] add imgError event

传入的imgsArr默认值要用函数返回

bug:
触发scrollReachBottom方法时候，调用this.imgsArr = this.imgsArr.concat(tempData);
会导致数据重新加载，滚动条默认回到顶部。

新版2.4.2存在此问题，旧版本2.1.9正常

没有图片，没有href，只有文字，自定义点击跳转，怎么用

感谢作者的 vue-waterfall-easy，解决了一大难题，谢谢

希望能添加 router-link 的支持