小程序基于雪碧图实现3d(横向全预览) ----组件

The wind is blowing

于 2021-04-14 18:32:16 发布

阅读量1.1k

点赞数

分类专栏：微信小程序小程序component自定义组件 javascript 文章标签：小程序 js wxs 3d 全景预览

本文链接：https://blog.youkuaiyun.com/qq_43156398/article/details/115705015

版权

本文介绍如何在小程序中利用雪碧图实现3D横向全预览效果。通过提供详细的小程序、JS和WXS代码示例，展示了一个流畅的3D全景预览组件的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序、前端交流群：609690978

先上效果图（gif图略有卡顿，实际很流畅）：
在这里插入图片描述

准备条件：
雪碧图，规格：单图尺寸343*375，帧数45帧（如图）
在这里插入图片描述

上代码：
wxml

<wxs src="./animate.wxs" module="wxsFun" />
<view class="{
    { loadEnd ? 'active' : ''}}">
  <image
	src="{
    { value }}"
	class="slideImg"
	mode="heightFix"
	bindload="handleLoad"
	lazy-load="{
    { true }}"
	id="{
    { `slideImg${index}` }}"
    data-height="{
    {imgHeight}}"
    data-width="{
    {imgWidth}}"
    data-screenwidth="{
    {screenWidth}}"
    style="height:{
      {
      imgHeight}}rpx;width:{
      {
      imgWidth}}rpx;margin-top: -120rpx;"
    bindtouchstart='touchStart' 
    bindtouchmove='touchMove' 
    bindtouchend='touchEnd'
    change:prop="{
    {wxsFun.stepNext}}" 
    prop="{
    {animateFlag}}"
    change:load="{
    {wxsFun.loadend}}" 
    change:id="{
    {wxsFun.getId}}" 
    load="{
    {loadEnd}}"
    direct="{
    {direct}}"
    change:direct="{
    {wxsFun.stepOne}}"
  ></image>
</view>

Component({
   
   properties: {
   
    url: {
   
      value: '',
      type: String,
      observer: function (value) {
   
        if (this.data.value != value) {
   
          if (!this.data.value) {
   
            this.setData({
   
              loadEnd: false

最低0.47元/天解锁文章