每周一推NPM包-第三弹

前言

为了不让自己的空余时间都浪费掉，打算做一个每周一推的专栏，盘点一些好的插件，分享给大家，每次分享前会先发到自己的博客，可以在博客中抢先看哦🎈。

circlr

我们在做商城或者物品类项目的时候，避免不了要做到物品360度展示，效果类似下图👇。

这款组件支持自定义旋转方向，旋转速度，以及鼠标滚轮，手指触摸控制旋转等等，用法也非常简单🎈。

circlr 通过滚动、鼠标和触摸事件进行动画旋转。

水平或垂直方向
触摸事件支持
滚动支持
反向和循环旋转

前提

我们在使用该组件时首先要获取到不同角度物品的照片，一般需要使用第三方的相机进行全景拍照，我们公司之前找到的厂商是特爱秀

用法

安装
1
npm install --save circlr

用法

import circlr from 'circlr';
 
const el = document.querySelector('.container');
 
circlr(el)
  .scroll(true)
  .play()
  .on('show', n => {
 
  });

基本使用

html

<template>
  <div>
    <div class="container" style="width:340px">
      <img v-for="item, index in imgList" style="height:340px;width:340px !important;"
        :src="`http://www.risd.com.cn/pro/41/imgs/imgsForweb2/${index}.jpg`" alt="" />
    </div>
  </div>
</template>

<script>
import circlr from 'circlr';
export default {
  name: 'ImgCirclr',
  props: {
    msg: String
  },
  data() {
    return {
      imgList: new Array(40).fill('')
    }
  },
  mounted() {
    const el = document.querySelector('.container');
      circlr(el)
        .scroll(true)
        .play()
        .on('show', n => {
        });
  }
}
</script>

style

<style>
img{
  height: 340px !important;
  width: 340px !important;
}
</style>

这样就实现了物品的360度展示，并支持鼠标滚轮根据方向启停🎉。

动态停止，启动

<script>
import circlr from 'circlr';
export default {
  name: 'ImgCirclr',
  props: {
    msg: String
  },
  data() {
    return {
      imgList: new Array(40).fill(''),
      circlrInstance: null
    }
  },
  mounted() {
    const el = document.querySelector('.container');
    // 将circlr赋值给vue中的data
    this.circlrInstance = circlr(el)
      .scroll(true)
      .play()
      .on('show', n => {
      });
  },
  methods: {
    // 停止旋转
    stopCirclr() {
      this.circlrInstance.stop()
    },
    // 开始旋转
    startCirclr() {
      this.circlrInstance.play()
    }
  }
}
</script>