vue-concise-slider
vue-concise-slider copied to clipboard
warpcgd
【意见收集】欢迎你对vue-slider 提出自己的建议及问题
新年好！今天发现一个问题，我在项目里使用了这个组件（横向滑动的），高度设置的比较大，在移动端浏览时发现，组件阻止了触摸事件的默认行为，只能左右滑动，导致我无法通过触摸纵向滑动这个页面，造成不方便。这个问题该如何解决呢，如何保证水平滑动时触发Slider左右滑动，而纵向滑动时，触发浏览器默认的页面滚动？
挺实用的插件，然而现在还没有在npm发布，只能拷贝代码使用，想npm install via git也不合适，因为项目名称是my-project。。。。发布一下也就1分钟的事~，LZ快去发布了吧，用户量肯定上来
@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}
@warpcgd 您好，我也发现从最后一页跳到第一页，当'autoplay'小于350ms时，会出现第一页卡顿暂停的现象，不知道这个问题现在有解决的办法了吗？
[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. 大佬，一直报这个错误，我是新手啊，完全整不出来，我是把这个当一个组件，通过路由加载的，就不行了
@cycsky 苹果请看这里，body上绑定了空事件https://github.com/warpcgd/vue-concise-slider/blob/master/index.html
希望增加一个功能，提供给pages提供一个component属性，该属性和html、style互斥。html是使用v-html指令渲染模板，而component是采用vue的动态组件去渲染模板。 如果需要，我可以试着提供pr
@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
@fynn90 谢谢你提的意见，我会尽快添加，另外如果急需，可以先不npm引入，直接下载按组件引入，找到components文件夹，只保留basic组件就行了
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"的报错
父子组件
<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触发不了
Uncaught TypeError: Cannot read property 'offsetLeft' of undefined 报这个错误是什么意思呢
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.
@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一下仓库改造下
