3d物品展示_每周一推（npm包）

前言

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

circlr

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

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

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

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

前提

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

用法

• 安装

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>

• js

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

常用API

• circlr(el) el代表dom实例 创建旋转实例
• scroll(n) n代表true/false 通过滚动标志旋转
• play([n]) 开始序列播放
• stop 停止播放
• interval(ms) 旋转间隔时间

效果如下👇

注意事项

• 获取dom的时候如果出现获取不到的时候需要通过使用nextTick进行获取
• 动态启停的时候要将初始的实例进行赋值，如果不使用初始值的话，停止或者启动的时候会从初始位置进行旋转

往期NPM包

timeago.js

vue-seamless-scroll

总结

circlr我们在做物品展示的时候是非常重要的，可以多角度控制物品的展示，使用方法也比较简单，希望对大家有所帮助🎈。