game-3dkadiya

game-3dkadiya

游戏

安装

npm install game-3dkadiya

使用

• json

{
    "usingComponents": {
        "game": "game-3dkadiya/index"
    }
}

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "game-3dkadiya"
  ]
}

• js

Page({
  data: {
    totalHeight: 0,
    scrollTop: 0,
  },
  onLoad(query) {
    console.log('page onLoad', query)
  },

  onInitDone(game) {
    this.gameComponent = game;
    this.setData({
      totalHeight: this.gameComponent.scroller._scrollHeight
    })
    // 跳转到下一个
    /* setTimeout(() => {
      this.gameComponent.nextFun();
    }, 2000) */
  },
  onScrollGo(height) {
    // 指定容器滚动到指定高度
    this.setData({
      scrollTop: height
    })
  },
  onUpdate(par){
    // 滚动回调
    // progress: 当前进度，总进度为 100, currentIndex：当前产品下标
    console.error(par);
  },

  scroll(e) {
    let scrollTop = e.detail.scrollTop;
    // this.onScrollGo(scrollTop);
    this.gameComponent.scroller.onScroll(scrollTop);
  },
})

• xaml

  <view class="pageBox full">
    <!-- 游戏容器 -->
    <game onInitDone="onInitDone" onUpdate="onUpdate" onScrollGo="onScrollGo" />
    <canvas id="tempCanvas" type="webgl" style1="background: red;position: relative;z-index: 10;"></canvas>
    <scroll-view scroll-y="{{true}}" scroll-top="{{scrollTop}}" class="full" onScroll="scroll">
      <view style="height:{{totalHeight}}px;">
      </view>
    </scroll-view>
  </view>

• acss

.full{
  /* 首页 */
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
}