轮播Ï

游戏

安装

npm install game-swiper

使用

• json

{
    "usingComponents": {
        "game": "game-swiper/index"
    }
}

• js

Page({
  data: {
    curIdx: 0,
    gameSource: {
      defLeftPos: "leftBottom",// 只能为leftBottom,leftTop
      items: [
        {
          name: "jordan",
          // poster: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01XIzocg1EUdOISLMkK_!!2185320355.jpg",
          opaBox: [
            {
              name: "bg",
              src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01RGl44g1EUdO91u11P_!!2185320355.jpg",
              width: 750,
              height: 1700,
              zIndex: 1,
              duration: 1
            },
            {
              name: "logo",
              src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01gUsXvD1EUdOFj8bNd_!!2185320355.png",
              width: 531,
              height: 255,
              left: 121,
              top: 186,
              zIndex: 5,
              delay: 0.1,
              duration: 1
            },
          ],
          moveOps: {
            def: { x: 750 / 2, y: 1700 / 2, scale: 1 },
            leftTop: { x: -1000, y: 0, scale: 0.8 },
            leftBottom: { x: -1000, y: 1700, scale: 1.2 },
            rightTop: { x: 1750, y: 0, scale: 0.8 },
            rightBottom: { x: 1750, y: 1700, scale: 1.2 },
          },
          moveBox: [
            {
              name: "bg1",
              src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01aH8aLI1EUdO6xav70_!!2185320355.png",
              width: 1626,
              height: 1791,
              offsetX: -626,
              offsetY: -898,
              zIndex: 2,
              duration: 1,
            },
            {
              name: "pro",
              src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01BQTMV21EUdOHcQbUq_!!2185320355.png",
              width: 515,
              height: 401,
              offsetX: -258,
              offsetY: -395,
              zIndex: 3,
              delay: 0.1,
              duration: 1,
              outdelay: 0.0001,
              outduration: 1,
            },
            {
              name: "前景",
              src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01OeEDxb1EUdOGWPM2T_!!2185320355.png",
              width: 598,
              height: 347,
              offsetX: -327,
              offsetY: -172,
              zIndex: 4,
              duration: 1
            },
          ]
        },
        {
          name: "bosideng",
          opaBox: [
            {
              name: "bg",
              src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN012QuDHT1EUdOD0m05q_!!2185320355.jpg",
              width: 750,
              height: 1700,
              zIndex: 1,
              duration: 1
            },
            {
              name: "logo",
              src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01uAabGy1EUdOKQCTUG_!!2185320355.png",
              width: 549,
              height: 234,
              left: 106,
              top: 172,
              zIndex: 1,
              delay: 0.1,
              duration: 1
            },
          ],
          moveOps: {
            def: { x: 750 / 2, y: 1700 / 2, scale: 1 },
            leftTop: { x: -1000, y: 0, scale: 0.8 },
            leftBottom: { x: -1000, y: 1700, scale: 1.2 },
            rightTop: { x: 1750, y: 0, scale: 0.8 },
            rightBottom: { x: 1750, y: 1700, scale: 1.2 },
          },
          moveBox: [
            {
              name: "bg1",
              src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01ArLlJh1EUdOGVOeOd_!!2185320355.png",
              width: 1893,
              height: 1967,
              offsetX: -893,
              offsetY: -967,
              zIndex: 2,
              duration: 1
            },
            {
              name: "pro",
              src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01UXe0Nh1EUdOFmZ4vh_!!2185320355.png",
              width: 281,
              height: 500,
              offsetX: -150,
              offsetY: -491,
              zIndex: 3,
              duration: 1
            },
            {
              name: "前景",
              src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01j7L3Kn1EUdOJdZnhp_!!2185320355.png",
              width: 616,
              height: 277,
              offsetX: -324,
              offsetY: -151,
              zIndex: 4,
              duration: 1
            },
          ]
        },
      ]
    }
  },

  onInitDone(obj) {
    this.gameComponent = obj;

    // this.gameComponent.next();//下一个
    // this.gameComponent.prev();//上一个
  },
  onChangeFun(curIdx) {
    console.log("当前下标:", curIdx)
  },
});

• xaml

  <view class="pageBox">
    <swiper1 gameSource="{{gameSource}}" curIdx="{{curIdx}}" onInitDone="onInitDone" onChangeFun="onChangeFun" />
  </view>

• acss

.pageBox{
  position: absolute;
  left: 0;
  top: 0;
  width: 750rpx;
  height: 1700rpx;
  background: #ccc;
}