【BUG收集】最好没有:)
warpcgd opened this issue · comments
留言需要涉及BUG产生的环境(设备,操作,结果)
在项目中引入,只能自动轮播,不能手动滑动
你写的demo中的参数写错了, hresholdDistance: 100,//滑动判定时间 ,对吧?
@huahuadavids 是的,已经修复
没有监听每个item的点击事件吗?
@Missna
API 里面我有提供slide的监听,当滑动页面时,提供页码,判定操作,如有需要也可以返回当前item的对象
vm.$on('slide', function(pagenum){console.log(pagenum)})
@Missna
你好,支持手势滑动的,测试地址:https://warpcgd.github.io/vue-slider/index.html
你好,我导入项目之后其他的都正常,唯一有问题就是滑动之后不会跳到下一个页面,而是又返回到当前页面了,动画特效都有,点击小圆点可以跳转。
@yaysQa 问题应该是滑动阈值设置过大,我自己设置了100px的阈值,以及500ms的时间判断,你可以设置小点
我试过了,依然不可以... Q^Q
可以了 ,谢谢!
@yaysQa 可以fork,自己修改下,组件写的很简单,方便大家修改
你好,苹果手机并不能滑动!试了两台iphone6,都是第一张到第二张可以滑动,然后就不能动了... andriod手机内置浏览器没有这个问题。
@yaysQa 更新了代码,阻止了滑动时的页面滚动,测试暂时没问题,但是,多个滑动组件会存在只有一个能滑动的问题。
你好,能加一下你的联系方式吗? 还是没能解决不能滑动的问题。safari里面只有第一张图片能左右滑动,其他图片左右滑动没有丝毫反应...
@yaysQa 加下微信warpcgd
无缝循环滚动模式下恶意快速点击有bug
@bogCoding 嗯,是说的会产生空白的间断吗?
是的,点击下一页时候。点击上一页时候也有卡顿现象
@bogCoding 嗯,这个轮播设置了350ms的滑动缓冲,如果切换速度小于350ms,是会产生间隙的情况:(
@bogCoding 临时的解决方法,是修改循环滚动里面写死的定时,200ms,快速点击的问题会解决,
if(type == 'loop'){ setTimeout(function(){ if(that.sliderinit.currentPage == -1){ that.slide(that.pagenums-1,'animationnone'); }else{ that.slide(0,'animationnone'); } },200);
你好我想问一下怎样控制transform: translate3d(-240px, 0px, 0px);的属性一打开banner就是这样的两张图片一起叠一起显示了,滑动了才正常显示,它的currentWidth:是根据什么来的设置不了
@Foreverww 你好,currentWidth是根据currentPage进行计算,即通过当前页,计算其前几个轮播图的宽度,从而得到translate3d的偏移量,两张图片一起叠,问题还没出现过,可以写个demo发我邮箱warpcgd@qq.com
在readme的demo中的:pages="someList"
应该是:pages="pages"
才对吧,demo里面没有someList这个参数
@likelight 是的,应该是pages,谢谢提醒,已经修改
在系统版本较低的ios里 不出现图片,版本较高的ios里 出现了图片但是不能滑动 。安卓手机正常
@jinhangcai 你好,确认下demo(https://warpcgd.github.io/vue-slider/index.html) 是否能在设备上正常滑动和显示,ios不滑动的问题之前遇到过,可能是事件传递上的问题,解决方法请看下我写的demo,在body上注册一个空的事件 (https://github.com/warpcgd/vue-slider/blob/gh-pages/index.html)
@warpcgd 你好, 我刚扫了下你的demo,在ios 8X的系统内不行(布局乱了,滑动也失效),IOS 10X的系统内可以
@jinhangcai 你好,我更新了代码,对ios9以下做了兼容处理,谢谢你提交的bug
@warpcgd 不客气,我在clone来试试 3Q
@warpcgd 你的demo(https://warpcgd.github.io/vue-slider/index.html) 更新过了吗,我扫过来布局还是乱的
@jinhangcai 可以了,做了处理
@warpcgd 你的demo我试了下,不行哦,我手机版本8.3
你项目里的package没了
@jinhangcai 我清理缓存看了下,样式已经进行了修改,你拉下代码,到本地测试下吧,demo可能有缓存
@warpcgd 我clone了你的代码,发现文案和背景是出来了,但是没有占到屏幕宽的100%,只是根据你字体的撑开了屏幕的宽度
Hi there,
貌似缺了一個檔案
Error: Cannot find module ".././utils/detect-prefixes.js"
--- 編輯
找到了,不過在這裡下載 zip 的話會漏 src 的檔案
https://github.com/warpcgd/vue-slider
在很多安卓机上,若滑动的页面内是flex布局的很多figure时,点击每个figure无效果哦。应该是点击事件被干扰了。
DEMO 中的无缝滚动例子在第三章滚动过之后,下面的小白点消失的时间比第一张滚动到第二章的时间长了一些
你好,看了文档,还是不知道怎么在slider组件里面写多个页面??比如说我需要5个页面垂直滚动,每个都是一屏幕这么高。只能在data里面声明 pages{title: xxx,style:xxxx}??但是我一个页面需要有一些div标签,img,span 标签呢??按文档说的,只能用title设置一下html?
@zerofront 你好,目前组件暂时只支持图片,里面需要插入其他标签,可以在组件基础上进行二次开发
你好,如何动态传入数据?
someList?
初始化
someList: [3],
然后
this.someList[0]="{style: {background:'url(http://www.cc.com/jfxt_home/profile/goods/100000039541/60055/31509/1_3.jpg)'}}";
无图片显示
都初始化了,数组有变化,
this.someList.push(
{title: 'slidenew', style: {'background':'#8888d'}},
{title: 'slidene33w', style: {'background':'#45676'}},
{title: 'slidene336w',style:{'background':'#5678e'}}
);
但是它好像不支持,后面的 style: {'background':'#8888d'}
你好,能加上PC版点击上一页和下一页图标进行切换吗
在手机上, 无法手动互动,修改了 thresholdDistance: 10 , thresholdTime: 10 也不行.
上面给的demo 地址已经失效. (https://warpcgd.github.io/vue-slider/index.html )
使用的配置是:
103 sliderinit: {
104 currentPage: 0,//当前页码
105 thresholdDistance: 1,//滑动判定距离, 超过这个距离才算滑动
106 thresholdTime: 10,//滑动判定时间, 超过这个时间才算滑动
107 autoplay:3000,//自动滚动[ms]
108 loop:true,//循环滚动
109 direction:'horizontal',//方向设置,垂直滚动
110 infinite:1,//无限滚动前后遍历数
111 slidesToScroll:1,//每次滑动项数
112 }
另外,我看官方文档上的 demo: https://warpcgd.github.io/vue-concise-slider/index.html
前两个也是无法人肉拖动的.
环境: Ubuntu 14, chrome 51.0
你好,怎么给每页加链接~
您好,手动怎么不发滑动,我看给出的demo是可以用鼠标滑动的,但是自己的项目就不能滑动翻页,看了参数什么的 也没有关于这个的设置,能帮忙解决一下吗? 谢谢
@lambertshe 可以看看demo https://github.com/warpcgd/vue-concise-slider/blob/master/index.html,
body上绑定了空方法,是不是这个原因造成的?
我试了 不行 绑定了空方法。 而且我看到你这个是 解决ios的bug? 我现在还没放到手机上,在chrome中调试。用的vuejs最新版,有影响吗?
@lambertshe vuejs出错会报错的,应该不是这方面造成,除了不能手动滚动,上一页下一页的功能能进行吗
嗯,其他的都可以,自动翻页,设置秒数等等都是好的,除了不能自己手动翻页。不过vuejs 有这个bug 问题是处在哪里呢?
vue写的项目在苹果手机上可以下拉,没有写下拉效果这个是什么问题?有没有办法可以解决?
作者大大,我刚才看到这里已经有click事件了,请问要怎么绑定呢?是这样吗:element.onclick=function(){}
?
someList通过异步请求的数据会导致组件初始化的时候someList为空,'offsetLeft' 为 undefined",请问作者大大有什么好的方案解决吗
@tangziqing 已经发现了这个bug,最近修复后会发布
@tangziqing 已经修复了,更新最新版本即可
您好, 当 ‘autoplay’ 小于350ms时, 最后一页到第一页会有停顿。在源码中并没有找到您在2016年11月提到的 ‘修改循环滚动里面写死的定时,200ms’
作者大大,我现在想实现如下功能: 点击按钮开始轮播,再次点击停止轮播。我原先是设'autoplay'为0, 点击按钮后设为具体数字,但是不行。请问我应该怎么设置参数呢?
loop:true => loop:true,
移动端上滑动闪屏求解
问题1":安卓,苹果都有,
问题2":改了初始化宽度90%改成100%,点击除第一张图外会有前一张的片角留下,能动态更改slider-wrapper的
transform: translate3d(-338px, 0px, 0px);吗,这个算的还是90%的宽度偏移量.
另外项目是vue搭建的.插件是npm挂载下来的
@AngleXi 我测试了下可以呀,使用demo在浏览器中测试,https://warpcgd.github.io/vue-concise-slider/demo/
移动端不能滑动不能用文档上写的默认值,需要自己调整成合适的值,例如:
{
thresholdDistance: 50,
thresholdTime: 1000
}
建议文档说明一下要好,因为我发现thresholdTime给的太短的话基本不能手势滑动
你好,多张图轮播,同时展示三个,如何确定点击的哪一个
苹果8 IOS11.0.2 第一页横向滑动到第二页可以 然后第二页就不能再滑动了
谷歌浏览器测试正常
sliderinit: {
thresholdDistance: '100',
direction: 'horizontal',
infinite: 1,
timingFunction: 'ease',
duration: 300
}
这是我的配置
@BillyQin 不能滑动还是不能滑动到下一页呢
1.如果是不能滑动到下一页,应该是配置里面阈值设定过高,试着设定为
{
thresholdDistance: 50,
thresholdTime: 1000
}
2.如果是不能滑动,试着在父级绑定空的ontouchstart事件,比如demo中使用的
<div class="main" ontouchstart="iosScrollBug()">
<h3>渐变滚动/fade</h3>
<div id="sliderfade"></div>
<h3>基本例子/basic</h3>
<div id="sliderbasic"></div>
<h3>垂直滚动/vertical</h3>
<div id="slidervertical"></div>
<h3>不定宽度/variableWidth</h3>
<div id="slidervariableWidth"></div>
<h3>无缝循环滚动/basicloop</h3>
<div id="sliderbasicloop"></div>
<h3>多层级滚动/multipleSlide</h3>
<div id="slidermultipleSlide"></div>
<h3>旋转滚动/coverFlow</h3>
<div id="slidercoverFlow"></div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.1.3/vue.js"></script>
<script src="dist/build.js"></script>
<script>
// ios 如果父层不进行touch事件的绑定,会造成子层不触发touch事件,猜想可能是事件的传递问题
function iosScrollBug(){}
</script>
在pc端 为什么我点击下一页 或者上一页 没有任何反应 自动轮播可以呢?也更改了 滑动时间阈值
sliderinit: {
currentPage: 0,
tracking: false,
thresholdDistance: 50,
thresholdTime: 1000, // 滑动时间阈值判定
infinite: 4, // 多级滚动时,需要添加前后遍历数
slidesToScroll: 1, // 需要滚动页面的数量
loop: true, // 无限循环
// autoplay: 1000 // 自动播放:时间[ms]
},
上一页 和下一页 是按照demo上写的:
slideNext() {
this.$children[0].$emit('slideNext');
},
slidePre() {
this.$children[0].$emit('slideNext')
},
哪里出问题了 ? 求解答
作者 大大 ,能快速解答吗? 多张slider进行展示,当点击下一张滚动一张,上一张返回上一张
支持IE9么
改变屏幕宽度后渐变轮播就乱了
@Areocrystal 你好,问题已经解决
图片过长,只能看到中间一部分,怎么上下滑动查看完整的图片,谢谢回答!
Cannot read property 'offsetLeft' of undefined 轮播图片不显示时候报错 图片有时候不加载 就报这个错 有时候是好的
@gaoweichao 你好,谢谢你提的问题,手机端我测试过了,可以滑动的呢,是什么手机测试的呢,上下滑动是指在轮播图上下滑动吗
这个thresholdTime参数是不是有点奇怪,如果我滑动超出我设置的thresholdDistance,并且hold住一会时间超过thresholdTime,然后松手,滑动就会失败返回之前那页,但是我觉得体验上应该是会划到下一页的因为滑动距离已经超过了thresholdDistance。另外移动端上这个thresholdDistance能否设置百分比比如50%
@gaoweichao 滑动时取消了上下拖动页面的事件
@gaoweichao https://github.com/warpcgd/vue-concise-slider/blob/master/src/components/slider.vue#L228 可以通过preventDocumentMove参数配置