script引入vue-concise-slider 组件 #80

warpcgd · 2019-06-18T08:53:37Z

webpack全局已经打包为umd，可以直接使用script引入，model地址在：
https://github.com/warpcgd/vue-concise-slider/blob/V3/dist/module.js
script直接引入后，同vue一样，slider挂载在window.vueConciseSlider
demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>slider</title>
    <style>
    body {
        background: #eee none repeat scroll 0 0;
        color: #000;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        margin: 0;
        padding: 0;
        /* position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;*/

        /*bug:当内容超过一屏时，滚动条需要默认显示*/
        overflow-y: scroll;
        width: 100%;
    }
    body div{
        width: 100%;
    }
    .main {
        display: -webkit-flex;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        height: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
<body>

    <div id="main" class="main" ontouchstart="iosScrollBug()">
        <div style="width:70%;margin:20px auto;height:400px">
          <slider ref="slider" :options="options" >
            <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
          </slider>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="module.js"></script>
<script>
    // ios 如果父层不进行touch事件的绑定，会造成子层不触发touch事件，猜想可能是事件的传递问题
    function iosScrollBug(){}


    let {
      slider,
      slideritem
    } = window.vueConciseSlider
    Vue.component('slider', slider)
    Vue.component('slideritem', slideritem)
    new Vue({
      el: '#main',
      data () {
        return {
          someList: [
              {
              html: 'slide1',
              style: {
                'background': '#1bbc9b'
              }
            },
            {
              html: 'slide2',
              style: {
                'background': '#4bbfc3'
              }
            },
            {
              html: 'slide3',
              style: {
                'background': '#7baabe'
              }
            }
          ],
          options: {
            pagination: true,
            thresholdDistance: 100, // 滑动距离阈值判定
            thresholdTime: 300, // 滑动时间阈值判定
            grabCursor: true, // 抓标样式
            speed: 300 // 滑动速度
          }
        }
      }
    })
</script>
</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

script引入vue-concise-slider 组件 #80

script引入vue-concise-slider 组件 #80

warpcgd commented Jun 18, 2019 •

edited

Loading

script引入vue-concise-slider 组件 #80

script引入vue-concise-slider 组件 #80

Comments

warpcgd commented Jun 18, 2019 • edited Loading

warpcgd commented Jun 18, 2019 •

edited

Loading