{"_id":"@an1r0ny/skyline-swiper","_rev":"11-92a00cf5ebb8bcfba47f4e4026787c80","name":"@an1r0ny/skyline-swiper","dist-tags":{"latest":"0.4.1"},"versions":{"0.3.0":{"name":"@an1r0ny/skyline-swiper","version":"0.3.0","keywords":["weixin","miniprogram","swiper","component","skyline"],"author":"","license":"MIT","_id":"@an1r0ny/skyline-swiper@0.3.0","maintainers":[{"name":"an1r0ny","email":"anirony185@qq.com"}],"dist":{"shasum":"34057b04fdc60754dab3f4c1ab32d835e77ac1d9","tarball":"https://registry.npmjs.org/@an1r0ny/skyline-swiper/-/skyline-swiper-0.3.0.tgz","fileCount":11,"integrity":"sha512-o9DLPOR/JNOSwsndVi2poYlLB1fYZoFu8Iu4rsfquZVq/wpbO+eBEnRpMZtpR1Pk05DF4sTBDYh0GlY4A1gcwA==","signatures":[{"sig":"MEUCIQD3iEPOCexumVFd29bkevOUnIfo8qxQKF2vaRL3KVEHqAIgHmc3WzA+5JAnw73TBCylBE4VFJ3kgcjuplnuOxpnZLM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15262},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a08c315ec23da19b3127ae783931aec8e36d2ecc","scripts":{"build":"npm run clean && npm run build:js && npm run build:assets && npm run build:entry","clean":"rm -rf dist","build:js":"node build-worklet.js","build:entry":"cp src/index.js dist/index.js","build:assets":"cp src/*.wxml dist/ && cp src/*.scss dist/ && cp src/*.json dist/","prepublishOnly":"npm run build"},"_npmUser":{"name":"an1r0ny","email":"anirony185@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.8.2","description":"微信小程序轮播组件 - 支持Skyline渲染模式","directories":{},"miniprogram":"dist","_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.24.0"},"_npmOperationalInternal":{"tmp":"tmp/skyline-swiper_0.3.0_1748082221834_0.16328631594531395","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@an1r0ny/skyline-swiper","version":"0.4.0","keywords":["weixin","miniprogram","swiper","component","skyline"],"author":"","license":"MIT","_id":"@an1r0ny/skyline-swiper@0.4.0","maintainers":[{"name":"an1r0ny","email":"anirony185@qq.com"}],"dist":{"shasum":"ff61d5bf68936db6a3109f6b85f171c074f0f3ab","tarball":"https://registry.npmjs.org/@an1r0ny/skyline-swiper/-/skyline-swiper-0.4.0.tgz","fileCount":11,"integrity":"sha512-gZIie2wkTSAsqmoWMuf45xnkinRJyw6pI5FDnrxbGvzX3Clr5DGWXUcslkAKEmmzRIBc5zDrHTuITsWnbMl6mQ==","signatures":[{"sig":"MEYCIQDzlCaCPIxE/tmFX2cMzBZDFk/c1dvd7WNucv+fcG4j9QIhAPKtAeHh+U0rfteazmcpeJyrZwidUPhAXJIOV96ds3c2","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18098},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"937d981b6ea8cf6c3e8d8e44bcd65fe4b60dd532","scripts":{"build":"npm run clean && npm run build:js && npm run build:assets && npm run build:entry","clean":"rm -rf dist","build:js":"node build-worklet.js","build:entry":"cp src/index.js dist/index.js","build:assets":"cp src/*.wxml dist/ && cp src/*.scss dist/ && cp src/*.json dist/","prepublishOnly":"npm run build"},"_npmUser":{"name":"an1r0ny","email":"anirony185@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.8.2","description":"微信小程序轮播组件 - 支持Skyline渲染模式","directories":{},"miniprogram":"dist","_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.24.0"},"_npmOperationalInternal":{"tmp":"tmp/skyline-swiper_0.4.0_1748397954988_0.7362049745276773","host":"s3://npm-registry-packages-npm-production"}},"0.4.1":{"name":"@an1r0ny/skyline-swiper","version":"0.4.1","description":"微信小程序轮播组件 - 支持Skyline渲染模式","main":"dist/index.js","types":"dist/index.d.ts","miniprogram":"dist","scripts":{"build":"npm run clean && npm run build:js && npm run build:assets && npm run build:entry","build:js":"node build-worklet.js","build:assets":"cp src/*.wxml dist/ && cp src/*.scss dist/ && cp src/*.json dist/","build:entry":"cp src/index.js dist/index.js","clean":"rm -rf dist","prepublishOnly":"npm run build"},"keywords":["weixin","miniprogram","swiper","component","skyline"],"author":"","license":"MIT","devDependencies":{"esbuild":"^0.24.0"},"repository":{"type":"git","url":""},"publishConfig":{"access":"public"},"_id":"@an1r0ny/skyline-swiper@0.4.1","gitHead":"b4faa1a63747485ebcbd215d2829e6bae75c54b0","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-aV6ZCfZGuiomK7R25bZQX6Dw3h+FXZOJIuThqTyF/xC8jowQys0dGQKJnfMEX9WPdzCK6UIw1d9dyzfj9lMKOw==","shasum":"0ac90224982174d8ba199e1478e0f3e08f000e9f","tarball":"https://registry.npmjs.org/@an1r0ny/skyline-swiper/-/skyline-swiper-0.4.1.tgz","fileCount":11,"unpackedSize":18068,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHQeNA13+02FuSPea2xduHtWt4LcPQMDGZVtbD23r1CiAiBGdGvAq+PFR8XothLJdBMgsQHC+nbKtQgprNZyz9codQ=="}]},"_npmUser":{"name":"an1r0ny","email":"anirony185@qq.com"},"directories":{},"maintainers":[{"name":"an1r0ny","email":"anirony185@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/skyline-swiper_0.4.1_1755168348883_0.0807097011527318"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-24T05:51:31.150Z","modified":"2025-08-14T10:45:49.238Z","0.0.1":"2025-05-24T05:51:31.405Z","0.1.0":"2025-05-24T06:01:20.783Z","0.2.0":"2025-05-24T10:01:31.123Z","0.2.2":"2025-05-24T10:18:18.257Z","0.3.0":"2025-05-24T10:23:42.021Z","0.4.0":"2025-05-28T02:05:55.203Z","0.4.1":"2025-08-14T10:45:49.075Z"},"license":"MIT","keywords":["weixin","miniprogram","swiper","component","skyline"],"repository":{"type":"git","url":""},"description":"微信小程序轮播组件 - 支持Skyline渲染模式","maintainers":[{"name":"an1r0ny","email":"anirony185@qq.com"}],"readme":"# Sky Swiper\n\n微信小程序轮播组件，支持Skyline渲染模式，提供流畅的滑动体验。\n\n## 特性\n\n- 🚀 基于Skyline渲染引擎，性能优秀\n- 📱 支持水平和垂直滑动\n- 🎯 可配置弹性回弹效果\n- ⚡ 支持动画过渡\n- 🔧 丰富的配置选项\n\n## 重要说明\n\n⚠️ **此组件必须在Skyline渲染模式下使用才能正常工作！**\n\n## 安装\n\n```bash\nnpm install @an1r0ny/sky-swiper\n```\n\n## 使用方法\n\n### 1. 启用Skyline渲染模式\n\n在 `app.json` 中启用Skyline渲染模式：\n\n```json\n{\n  \"renderer\": \"skyline\",\n  \"rendererOptions\": {\n    \"skyline\": {\n      \"disableABTest\": true\n    }\n  },\n  \"componentFramework\": \"glass-easel\"\n}\n```\n\n或者在页面的 `page.json` 中启用：\n\n```json\n{\n  \"renderer\": \"skyline\",\n  \"componentFramework\": \"glass-easel\"\n}\n```\n\n### 2. 安装依赖后构建npm\n\n在微信开发者工具中：\n1. 点击菜单栏 \"工具\" → \"构建npm\"\n2. 确保构建成功\n\n### 3. 在page.json中注册组件\n\n```json\n{\n  \"usingComponents\": {\n    \"sky-swiper\": \"@an1r0ny/sky-swiper/sky-swiper\",\n    \"sky-swiper-slide\": \"@an1r0ny/sky-swiper/sky-swiper-slide\"\n  }\n}\n```\n\n### 4. 在wxml中使用\n\n```xml\n<sky-swiper current=\"{{current}}\" bind:change=\"onChange\">\n  <sky-swiper-slide>\n    <view class=\"slide-content\">slide 1</view>\n  </sky-swiper-slide>\n  <sky-swiper-slide>\n    <view class=\"slide-content\">slide 2</view>\n  </sky-swiper-slide>\n  <sky-swiper-slide>\n    <view class=\"slide-content\">slide 3</view>\n  </sky-swiper-slide>\n</sky-swiper>\n```\n\n**开启循环轮播：**\n\n```xml\n<sky-swiper current=\"{{current}}\" circular=\"{{true}}\" bind:change=\"onChange\">\n  <sky-swiper-slide>\n    <view class=\"slide-content\">slide 1</view>\n  </sky-swiper-slide>\n  <sky-swiper-slide>\n    <view class=\"slide-content\">slide 2</view>\n  </sky-swiper-slide>\n  <sky-swiper-slide>\n    <view class=\"slide-content\">slide 3</view>\n  </sky-swiper-slide>\n  <sky-swiper-slide>\n    <view class=\"slide-content\">slide 4</view>\n  </sky-swiper-slide>\n</sky-swiper>\n```\n\n### 5. 在js中处理事件\n\n```javascript\nPage({\n  data: {\n    current: 0\n  },\n  onChange(e) {\n    this.setData({\n      current: e.detail.current\n    });\n  }\n});\n```\n\n## 自定义滑块变换\n\n你可以通过 `setSlideTransform` 方法设置自定义的滑块变换效果，实现各种炫酷的动画效果。\n\n### 基本用法\n\n```javascript\n// 获取组件实例\nconst swiperComponent = this.selectComponent('#my-swiper');\n\n// 设置自定义变换函数\nswiperComponent.setSlideTransform((distance, slideSize, pxPerRpx) => {\n  'worklet';\n  \n  // distance: 当前滑块与中心位置的距离（可为负数）\n  // slideSize: 滑块尺寸（水平模式为宽度，垂直模式为高度）\n  // pxPerRpx: px与rpx的转换比例\n  \n  const offset = distance * slideSize;\n  const scale = 1 - Math.abs(distance) * 0.2; // 缩放效果\n  const opacity = 1 - Math.abs(distance) * 0.3; // 透明度效果\n  \n  return {\n    transform: `translateX(${offset}px) scale(${scale})`,\n    opacity: Math.max(0.1, opacity),\n    transformOrigin: 'center'\n  };\n});\n\n// 清除自定义变换，恢复默认效果\nswiperComponent.clearSlideTransform();\n```\n\n### 变换函数参数说明\n\n- **distance**: 当前滑块相对于中心位置的距离\n  - `0`: 当前显示的滑块\n  - `1`: 右侧/下方第一个滑块\n  - `-1`: 左侧/上方第一个滑块\n  - 支持小数，表示滑动过程中的中间状态\n\n- **slideSize**: 滑块的尺寸（px）\n  - 水平模式：滑块宽度\n  - 垂直模式：滑块高度\n\n- **pxPerRpx**: px与rpx的转换比例\n  - 可用于将rpx单位转换为px：`rpxValue / pxPerRpx`\n\n### 示例效果\n\n**卡片堆叠效果：**\n```javascript\nswiperComponent.setSlideTransform((distance, slideSize, pxPerRpx) => {\n  'worklet';\n  const offset = distance * slideSize;\n  const scale = 1 - Math.abs(distance) * 0.1;\n  const zIndex = 100 - Math.abs(distance);\n  \n  return {\n    transform: `translateX(${offset}px) scale(${scale})`,\n    zIndex: zIndex,\n    transformOrigin: 'center'\n  };\n});\n```\n\n**3D旋转效果：**\n```javascript\nswiperComponent.setSlideTransform((distance, slideSize, pxPerRpx) => {\n  'worklet';\n  const offset = distance * slideSize;\n  const rotateY = distance * 45; // 旋转角度\n  \n  return {\n    transform: `translateX(${offset}px) rotateY(${rotateY}deg)`,\n    transformOrigin: 'center',\n    transformStyle: 'preserve-3d'\n  };\n});\n```\n\n**淡入淡出效果：**\n```javascript\nswiperComponent.setSlideTransform((distance, slideSize, pxPerRpx) => {\n  'worklet';\n  const offset = distance * slideSize;\n  const opacity = Math.max(0, 1 - Math.abs(distance));\n  \n  return {\n    transform: `translateX(${offset}px)`,\n    opacity: opacity\n  };\n});\n```\n\n## API\n\n### SkySwiper 属性\n\n| 属性 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| current | Number | 0 | 当前显示的滑块索引 |\n| bounce | Boolean | true | 是否开启回弹效果 |\n| vertical | Boolean | false | 是否为垂直滑动 |\n| withAnimation | Boolean | false | 切换时是否使用动画 |\n| cacheExtent | Number | 4 | 缓存范围 |\n| damping | Number | 20 | 阻尼系数 |\n| mass | Number | 2 | 质量 |\n| restDisplacementThreshold | Number | 0.01 | 静止位移阈值 |\n| restSpeedThreshold | Number | 2 | 静止速度阈值 |\n| disabled | Boolean | false | 是否禁用滑动 |\n| circular | Boolean | false | 是否开启循环轮播 |\n| minCircularSlides | Number | 4 | 启用循环轮播的最少滑块数量 |\n\n### SkySwiper 方法\n\n| 方法名 | 参数 | 说明 |\n|--------|------|------|\n| setSlideTransform | transformFunction | 设置自定义滑块变换函数 |\n| clearSlideTransform | - | 清除自定义滑块变换函数 |\n\n### SkySwiper 事件\n\n| 事件名 | 说明 | 返回值 |\n|--------|------|--------|\n| change | 滑块切换时触发 | { current: Number } |\n| transitionend | 动画结束时触发 | { current: Number } |\n\n## 故障排除\n\n如果手势滑动不生效，请检查：\n\n1. ✅ 是否启用了Skyline渲染模式\n2. ✅ 是否正确构建了npm包\n3. ✅ 小程序基础库版本是否支持Skyline\n\n## 开发\n\n```bash\n# 安装依赖\nnpm install\n\n# 构建\nnpm run build\n\n# 清理构建\nnpm run clean\n```## 许可证\n\nMIT \n\n","readmeFilename":"README.md"}