【意见收集】欢迎你对vue-slider 提出自己的建议及问题

[warpcgd]

在这里可以提出你的建议，帮助改进组件

[zhangjun124417]

无法npm到项目里面

[warpcgd]

https://github.com/warpcgd/vue-slider/tree/gh-pages 完整文档里面有测试的用例

[zzwooc]

首先谢谢，嗯，同意放到npm，写东西的时候，这个作为一个插件，肯定不放到代码库上，不在npm上，每次clone代码还需要自己拷一份这个

[warpcgd]

谢谢你提的意见，最近找工作比较忙，下个版本会放到npm上

[bulolo]

vue2.0?

[warpcgd]

@bulolo it is based on vue 1.0

[LeiWang12]

在android手机图片轮播，为啥布局会出现混乱。。。。求教

[warpcgd]

@LeiWang12 嗯，最好有图片说明下，混乱的情况是什么

[warpcgd]

@Foreverww 你说的是img插入图片吗，目前实现的方法是style属性background

[mengchen129]

怎么没有package.json文件呢，没法通过npm install 安装依赖包

[warpcgd]

@mengchen129 https://github.com/warpcgd/vue-slider/tree/gh-pages

[sherfruit]

我是新人，请问一下demo是写在app.vue里，然后引入slider组件就可以了吗？

[warpcgd]

@kukujbb 是的，文档的结构请看 https://github.com/warpcgd/vue-slider/tree/gh-pages

[MurWhite]

嗨，这个只支持图片么。会支持组件么，需要做成类似tab间的切换

[warpcgd]

@MurWhite 嗨,slider初衷只是想建立一个简单的幻灯片，tab切换可以在这基础上二次开发，晚些提供案例

[mengchen129]

新年好！今天发现一个问题，我在项目里使用了这个组件（横向滑动的），高度设置的比较大，在移动端浏览时发现，组件阻止了触摸事件的默认行为，只能左右滑动，导致我无法通过触摸纵向滑动这个页面，造成不方便。这个问题该如何解决呢，如何保证水平滑动时触发Slider左右滑动，而纵向滑动时，触发浏览器默认的页面滚动？

[warpcgd]

@mengchen129 你好，我在组件里写了注释，将调用阻止全屏滚动的方法注释掉即可

[zhangzan]

能插入 dom 或 vue component 吗？ 我看文档好像只有 style

[warpcgd]

@zhangjun 暂时只有文本插入，dom我稍后加上去

[chairuosen]

挺实用的插件，然而现在还没有在npm发布，只能拷贝代码使用，想npm install via git也不合适，因为项目名称是my-project。。。。发布一下也就1分钟的事~，LZ快去发布了吧，用户量肯定上来

[warpcgd]

@chairuosen 谢谢你的建议，今天我添加到npm上

[andrew703]

@warpcgd 正好今天看到了这个插件 正好回复时间是 5 hours ago

[warpcgd]

@chairuosen 已经发布了 https://www.npmjs.com/package/vue-concise-slider

[tangziqing]

如何给每张图片加一个链接，点击即可进入相应界面啊

[Riant]

@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>

[warpcgd]

@Riant 谢谢提供的思路，有个问题，click能在移动端适用吗？

[akFace]

您好，这个插件很好用，就是slider-pagination-bullet不能自定义样式，以及当active的时候的样式，希望能加入这个自定义样式的功能，因为遇到用白色的背景图，然后active的时候完全看不到了。希望能加入这一功能

[warpcgd]

@kang558 分页的小点是css控制的样式，可以直接另写覆盖，稍后我添加自定义的样式名进去吧

[Riant]

@warpcgd 当然是可以用的，不过部分 Android 和 iOS 会有300ms的延迟，建议配合 fastclick 使用

[MrRiven]

在移动端点击不了, pc端是可以的 .. emmm

[warpcgd]

@MrRiven 我估计应该是开启了移动调试，使用tap去测试click吧，
这个问题最近也有人反馈，我晚上更新下版本

[MrRiven]

好. 辛苦楼主

[warpcgd]

@MrRiven 更新v3.2.0版本解决之前提到的问题

[Mrangmaomao]

Uncaught TypeError: Cannot read property 'offsetLeft' of undefined 报这个错误是什么意思呢

[warpcgd]

@Mrangmaomao 使用场景是什么，可以开一个issue贴一下

[chenrrui]

请问分页页标可以自定义吗？比如 1、2、3、4类似页码那种

[warpcgd]

@chenrrui 可以看下我写的自定义分页的demo

[leandroramirez]

Hi, Good job!
Is possible to show a live demo in the vue-concise-slider home page? It would be great.

[warpcgd]

@leandroramirez Thank you for your suggestion, I will add it as soon as possible.

[zss1004504439]

SSR 有计划吗

[9527qingfeng]

怎么加载网络图片，demo里也没有

[warpcgd]

@gqf1995 网络图片，直接把demo里面的图片地址改成网络的就好了

[zengjm]

请问3.4.1版本，不支持解析html标签的嘛？demo里面的

[warpcgd]

@zengjm 已经不支持v-html指令，现在直接使用slot即可

[iizhangchao]

支不支持 SSR ?

[warpcgd]

@iizhangchao 暂不支持，可以看下issue里面讨论的

[JinGits]

@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.
这个错误应该是没有按照正常的标签嵌套所导致
但我通过查看元素，发现并没有不妥的地方
，另外微信二维码已失效了

[warpcgd]

@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

[YUUtan1994]

您好，请问swiperitem的内容如何设置滚动；我注意到在.slider-container设置了white-space: nowrap;导致子元素基本都继承了，在swiperitem设置white-space: normal样式会混乱。

[outlawsoflove]

@Mrangmaomao 使用场景是什么，可以开一个issue贴一下

当轮播数组是三条时，然后动态变成两条，就会出现offsetLeft' of undefined，通过监听slide，发现还是会但会第三项数据

[prodoxx]

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?

[chenweihuan]

设置自动播放时，能同时设置播放方向吗？比如在水平滚动下，大部分地区的习惯是往左滑动播放，但在阿拉伯地区是相反的，习惯往右滑动播放。

[warpcgd]

设置自动播放时，能同时设置播放方向吗？比如在水平滚动下，大部分地区的习惯是往左滑动播放，但在阿拉伯地区是相反的，习惯往右滑动播放。

目前还不支持

[chenweihuan]

设置自动播放时，能同时设置播放方向吗？比如在水平滚动下，大部分地区的习惯是往左滑动播放，但在阿拉伯地区是相反的，习惯往右滑动播放。

目前还不支持

有计划支持吗？

[warpcgd]

设置自动播放时，能同时设置播放方向吗？比如在水平滚动下，大部分地区的习惯是往左滑动播放，但在阿拉伯地区是相反的，习惯往右滑动播放。

目前还不支持

有计划支持吗？

暂时没有，可以fork一下仓库改造下

[qdXXQ]

@tap是点击事件吗？为什么点击轮播时候 slide函数会走两遍，还有初始化时候移动轮播图卡片会导致样式变更

[StarOfLife]

mounted() {
    this.config.pageWidth = this.$el.offsetWidth
    this.config.pageHeight = this.$el.offsetHeight
    // 设定垂直轮播class
    if (this.options.direction === 'vertical') {
      this.config.containerClass['swiper-container-vertical'] = true
    } else {
      this.config.containerClass['swiper-container-horizontal'] = true
    }
    document.removeEventListener('visibilitychange', this.visibilitychange, false)
    window.removeEventListener('resize', this.resize)
  },

原意是不是想要绑定这俩事件，写成了移除了

[andyzyq]

我怎么感觉这个左右滑动的时候，不顺畅，感觉有卡顿，或者是左右滑动的距离设置有问题，麻烦查看一下，谢谢