【意见收集】欢迎你对vue-slider 提出自己的建议及问题
warpcgd opened this issue · 102 comments
在这里可以提出你的建议，帮助改进组件
无法npm到项目里面
https://github.com/warpcgd/vue-slider/tree/gh-pages 完整文档里面有测试的用例
首先谢谢，嗯，同意放到npm，写东西的时候，这个作为一个插件，肯定不放到代码库上，不在npm上，每次clone代码还需要自己拷一份这个
谢谢你提的意见，最近找工作比较忙，下个版本会放到npm上
vue2.0?
在android手机图片轮播，为啥布局会出现混乱。。。。求教
@LeiWang12 嗯，最好有图片说明下，混乱的情况是什么
@Foreverww 你说的是img插入图片吗，目前实现的方法是style属性background
怎么没有package.json文件呢，没法通过npm install 安装依赖包
我是新人，请问一下demo是写在app.vue里，然后引入slider组件就可以了吗？
@kukujbb 是的，文档的结构请看 https://github.com/warpcgd/vue-slider/tree/gh-pages
嗨，这个只支持图片么。会支持组件么，需要做成类似tab间的切换
新年好！今天发现一个问题，我在项目里使用了这个组件（横向滑动的），高度设置的比较大，在移动端浏览时发现，组件阻止了触摸事件的默认行为，只能左右滑动，导致我无法通过触摸纵向滑动这个页面，造成不方便。这个问题该如何解决呢，如何保证水平滑动时触发Slider左右滑动，而纵向滑动时，触发浏览器默认的页面滚动？
@mengchen129 你好，我在组件里写了注释，将调用阻止全屏滚动的方法注释掉即可
能插入 dom 或 vue component 吗？ 我看文档好像只有 style
挺实用的插件，然而现在还没有在npm发布，只能拷贝代码使用，想npm install via git也不合适，因为项目名称是my-project。。。。发布一下也就1分钟的事~，LZ快去发布了吧，用户量肯定上来
@chairuosen 谢谢你的建议，今天我添加到npm上
如何给每张图片加一个链接，点击即可进入相应界面啊
@tangziqing
除了进行二次开发之外，我这边使用的方法是给 slider 添加 @click.native="onClick" 和 @slider=“onSlider” 事件监听，然后通过 onSlider 获得当前页面索引，在 onClick 里边就可以使用该索引进行相关点击事件处理了。
比如：
<template lang="pug">
.page.p-home
.banenr
slider(:pages='pages', :sliderinit='sliderinit'
@click.native='myalert'
@slide='onSliderChange'
)
</template>
<script>
import slider from 'vue-concise-slider'
export default {
data() {
return {
sliderAt: 0,
pages: [
{title: '红', style: {backgroundColor: '#FF0000'}},
{title: '蓝', style: {backgroundColor: '#0000FF'}},
{title: '绿色', style: {backgroundColor: '#00FF00'}}
],
sliderinit: {
...
}
}
},
methods: {
onSliderChange(pagenum) {
this.sliderAt = pagenum
},
myalert() {
console.log('Click on ' + this.sliderAt)
}
},
components: {
slider
}
}
</script>您好，这个插件很好用，就是slider-pagination-bullet不能自定义样式，以及当active的时候的样式，希望能加入这个自定义样式的功能，因为遇到用白色的背景图，然后active的时候完全看不到了。希望能加入这一功能
你的项目很棒，很轻量级，很适合移动端。但我在项目实际使用中发现，图片无法很好的自适应尺寸，所以自己做了修改。修改如下：
1，将style='background:url()'改为了
2，增加css .slider-item img { widht: 100%; height: auto}
3，.slider-item{height:auto} slider-container{ widht: 100%; height: auto}
@chiaweilee 谢谢你分享的经验，我会持续更新的
你好，我设置background为什么一直找不到图片，路径没问题啊
我想在非vue框架页面引入式 修改单个页面
无法引入一个 js类 然后实力化做这个slider么
无缝滚动例子 从最后一张图跳到以一张图的时候 会闪白屏
啥时候可以实现解析DOM呢？最近有用vue-fullpage这个插件，楼主可以看看，不过因为使用这个插件遇到坑了所有我才看看有没有其他插件好用的
看到上文提供了click方式增加链接，但是期望用a标签的形式增加链接，click并不友好，期待后续版本集成
@ssssssssong click的方式手机端无法使用，现在内置了tap的事件反馈，具体可以查看这里
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
大佬，一直报这个错误，我是新手啊，完全整不出来，我是把这个当一个组件，通过路由加载的，就不行了
@Clareforwyy 看看你的webpack配置呢 http://www.imooc.com/article/17868
@warpcgd 谢谢大佬，看着这篇文章解决了
在移动端用不的正常啊，左右效果没有
@cycsky 苹果请看这里，body上绑定了空事件https://github.com/warpcgd/vue-concise-slider/blob/master/index.html
@laden666666 谢谢你提的意见，有朋友已经提了相关代码， 我会尽快合并
使用的时候并不需要打包，希望可以浏览器直接用script标签引用。请问是否可以提供这样的做法？
增加一个是否阻止touch事件冒泡的控制器,避免影响下拉刷新等
@a7866443121 目前影响到了下拉刷新吗？
@touchmove.stop.capture.prevent="swipeMove"
@touchstart.stop.capture.prevent="swipeStart"
@touchend.stop.capture.prevent="swipeEnd"
@mousedown.stop.capture.prevent="swipeStart"
@mouseup.stop.capture.prevent="swipeEnd"
@mousemove.stop.capture.prevent="swipeMove"
代码里都进行了，阻止冒泡的指令
我想知道多层级滚动跟基本例子相比，你修改了哪里~~
我找不到~
@ALshas 区别在于核心在于currentWidth的动态计算，在多层级里面，每次滑动的个数应该是currentPage+infinite，具体可以在这里查看：https://github.com/warpcgd/vue-concise-slider/blob/master/src/components/slider.vue#L112
按需引入功能模块，我只需要基础滚动，但会把整个功能都打包引入。24K gzip太到了点 对于移动端的话
Is there an option to not see bullets in this library?
How to assign an event to the html elements inside the slider?
The event should be able to be called from my component in the vue.
循环自动播放轮播的时候 改变屏幕宽度会有偏差 整个滑动容器以及图片宽度变化 偏移量不变
参数设置成effect: 'coverflow',就会显示[Vue warn]: Error in render: "TypeError: Cannot read property 'indexOf' of undefined"的报错
如何点击其中一屏的按钮事件,似乎被阻止了
需要重新安装最新版本还是, 我还是点击不了
Chrome下, 其中一屏里面有个button ,触发不了click事件
父子组件
<slider ref="slider" :options="options" @slide='slide'>
<!-- 直接使用slideritem slot -->
<slideritem><page1 :currentPage.sync='currentPage'></page1></slideritem>
<slideritem><page2 :currentPage.sync='currentPage'></page2></slideritem>
<!-- 设置loading,可自定义 -->
<!-- <div slot="loading">loading...</div> -->
</slider>
子组件:page1
<transition
name="showRect"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
@before-leave="handleBeforeLeave"
@leave="handleLeave"
@after-leave="handleAfterLeave"
:css="false"
>
<div class="rect" v-show="show"></div>
</transition>
<button @click="handleClick">切换显示方块</button>
handleClick触发不了
在移动端点击不了, pc端是可以的 .. emmm
好. 辛苦楼主
Uncaught TypeError: Cannot read property 'offsetLeft' of undefined 报这个错误是什么意思呢
@Mrangmaomao 使用场景是什么，可以开一个issue贴一下
请问分页页标可以自定义吗？比如 1、2、3、4类似页码那种
Hi, Good job!
Is possible to show a live demo in the vue-concise-slider home page? It would be great.
@leandroramirez Thank you for your suggestion, I will add it as soon as possible.
SSR 有计划吗
怎么加载网络图片，demo里也没有
@gqf1995 网络图片，直接把demo里面的图片地址改成网络的就好了
请问3.4.1版本，不支持解析html标签的嘛？demo里面的
支不支持 SSR ?
@iizhangchao 暂不支持，可以看下issue里面讨论的
@iizhangchao暂不支持，可以看下问题里面讨论的
你好，我有看过issue讨论，并且在我的项目中也是按照那位同学的使用方法去使用，但是会报 The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
, or missing . Bailing hydration and performing full client-side render.
这个错误应该是没有按照正常的标签嵌套所导致
但我通过查看元素，发现并没有不妥的地方
，另外微信二维码已失效了
@iizhangchao暂不支持，可以看下问题里面讨论的
你好，我有看过issue讨论，并且在我的项目中也是按照那位同学的使用方法去使用，但是会报 The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
, or missing . Bailing hydration and performing full client-side render.
这个错误应该是没有按照正常的标签嵌套所导致
但我通过查看元素，发现并没有不妥的地方
，另外微信二维码已失效了
稍后我做个demo
您好，请问swiperitem的内容如何设置滚动；我注意到在.slider-container设置了white-space: nowrap;导致子元素基本都继承了，在swiperitem设置white-space: normal样式会混乱。
@Mrangmaomao 使用场景是什么，可以开一个issue贴一下
当轮播数组是三条时，然后动态变成两条，就会出现offsetLeft' of undefined，通过监听slide，发现还是会但会第三项数据
Hi, great job on this project. There is something missing that would be great if it was added. An event when the user starts sliding and when sliding ends (i.e. when the user starts dragging the slider item and when the user stops sliding the it goes to the other slider item). Any thoughts?
设置自动播放时，能同时设置播放方向吗？比如在水平滚动下，大部分地区的习惯是往左滑动播放，但在阿拉伯地区是相反的，习惯往右滑动播放。
设置自动播放时，能同时设置播放方向吗？比如在水平滚动下，大部分地区的习惯是往左滑动播放，但在阿拉伯地区是相反的，习惯往右滑动播放。
目前还不支持
设置自动播放时，能同时设置播放方向吗？比如在水平滚动下，大部分地区的习惯是往左滑动播放，但在阿拉伯地区是相反的，习惯往右滑动播放。
目前还不支持
有计划支持吗？
设置自动播放时，能同时设置播放方向吗？比如在水平滚动下，大部分地区的习惯是往左滑动播放，但在阿拉伯地区是相反的，习惯往右滑动播放。
目前还不支持
有计划支持吗？
暂时没有，可以fork一下仓库改造下