vue-concise-slider
vue-concise-slider copied to clipboard
warpcgd
【BUG收集】最好没有:)
@warpcgd 我的意思是应该增加一个点击的事件 有这样的需求需要用到,例如:有一共有5条数据在slider中显示出来,当点击不同的数据需要执行不同的动作
@Missna
API 里面我有提供slide的监听，当滑动页面时，提供页码，判定操作，如有需要也可以返回当前item的对象
vm.$on('slide', function(pagenum){console.log(pagenum)})
@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发我邮箱[email protected]
在readme的demo中的:pages="someList" 应该是:pages="pages"才对吧,demo里面没有someList这个参数
@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（https://warpcgd.github.io/vue-slider/index.html） 更新过了吗，我扫过来布局还是乱的
Hi there, 貌似缺了一個檔案 Error: Cannot find module ".././utils/detect-prefixes.js"
--- 編輯 找到了，不過在這裡下載 zip 的話會漏 src 的檔案 https://github.com/warpcgd/vue-slider
你好，看了文档，还是不知道怎么在slider组件里面写多个页面？？比如说我需要5个页面垂直滚动，每个都是一屏幕这么高。只能在data里面声明 pages{title: xxx,style:xxxx}??但是我一个页面需要有一些div标签，img，span 标签呢？？按文档说的，只能用title设置一下html？
初始化 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'}
在手机上, 无法手动互动,修改了 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最新版，有影响吗？
someList通过异步请求的数据会导致组件初始化的时候someList为空，'offsetLeft' 为 undefined"，请问作者大大有什么好的方案解决吗
您好, 当 ‘autoplay’ 小于350ms时, 最后一页到第一页会有停顿。在源码中并没有找到您在2016年11月提到的 ‘修改循环滚动里面写死的定时，200ms’
作者大大，我现在想实现如下功能: 点击按钮开始轮播，再次点击停止轮播。我原先是设'autoplay'为0， 点击按钮后设为具体数字，但是不行。请问我应该怎么设置参数呢？
问题1":安卓,苹果都有, 问题2":改了初始化宽度90%改成100%,点击除第一张图外会有前一张的片角留下,能动态更改slider-wrapper的 transform: translate3d(-338px, 0px, 0px);吗,这个算的还是90%的宽度偏移量. 另外项目是vue搭建的.插件是npm挂载下来的
@MrRiven 具体可以加微信warpcgd，截图看下 1.闪屏的问题我刚刚用demo测试了下，没有闪屏呢 2.宽度偏移量是自动计算好的，方式是计算当前slider的offsetleft，出现这个问题，应该css哪里对它有影响了
slide容易默认宽度90%,怎么才可以改成100%铺满呢
------------------ 原始邮件 ------------------ 发件人: "lixichen";[email protected]; 发送时间: 2017年11月22日(星期三) 下午4:01 收件人: "warpcgd/vue-concise-slider"[email protected]; 抄送: "陈实"[email protected]; "Mention"[email protected]; 主题: Re: [warpcgd/vue-concise-slider] 【BUG收集】最好没有:) (#2)
1.闪屏的问题我刚刚用demo测试了下，没有闪屏呢 2.宽度偏移量是自动计算好的，方式是计算当前slider的offsetleft，出现这个问题，应该css哪里对它有影响了
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
@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') },
哪里出问题了 ？ 求解答
Cannot read property 'offsetLeft' of undefined 轮播图片不显示时候报错 图片有时候不加载 就报这个错 有时候是好的
这个thresholdTime参数是不是有点奇怪，如果我滑动超出我设置的thresholdDistance，并且hold住一会时间超过thresholdTime，然后松手，滑动就会失败返回之前那页，但是我觉得体验上应该是会划到下一页的因为滑动距离已经超过了thresholdDistance。另外移动端上这个thresholdDistance能否设置百分比比如50%
@gaoweichao https://github.com/warpcgd/vue-concise-slider/blob/master/src/components/slider.vue#L228 可以通过preventDocumentMove参数配置