game-menu1

标签动画

安装

npm install game-menu1

使用

• json

{
    "usingComponents": {
        "menu": "game-menu1/index"
    }
}

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "game-menu1"
  ]
}

• js

Page({
  data: {
    gameSource: {
      menus: [
        {
          def: { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01p70mCS1EUdMN7xqd3_!!2185320355.png", "name": "11.png", "width": "70", "height": "70" },
          active: { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN0120MQQG1EUdMVZVkpg_!!2185320355.png", "name": "1.png", "width": "138", "height": "131" },
        },
        {
          def: { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01lCYBMJ1EUdMS3ivsT_!!2185320355.png", "name": "22.png", "width": "70", "height": "70" },
          active: { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01uwdznm1EUdMVZY6P8_!!2185320355.png", "name": "2.png", "width": "138", "height": "131" },
        },
        {
          def: { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01TdC9cL1EUdMVZVxJ3_!!2185320355.png", "name": "33.png", "width": "70", "height": "70" },
          active: { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01LfkIQj1EUdMNpREGj_!!2185320355.png", "name": "3.png", "width": "138", "height": "131" },
        },
        {
          def: { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01UhwlEg1EUdMWo9C4q_!!2185320355.png", "name": "44.png", "width": "70", "height": "70" },
          active: { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01Y2XFP81EUdMXZZobK_!!2185320355.png", "name": "4.png", "width": "138", "height": "131" },
        },
        {
          def: { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN010M9HnN1EUdMSUtCrJ_!!2185320355.png", "name": "55.png", "width": "70", "height": "70" },
          active: { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01kbkpwm1EUdMNpQI3B_!!2185320355.png", "name": "5.png", "width": "138", "height": "131" },
        },
        {
          def: { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01CJ1kC91EUdMQC8rbh_!!2185320355.png", "name": "66.png", "width": "70", "height": "70" },
          active: { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01X0WBNe1EUdMVZUgJ8_!!2185320355.png", "name": "6.png", "width": "138", "height": "131" },
        },
        {
          def: { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01IES9uV1EUdMSUs4Ac_!!2185320355.png", "name": "77.png", "width": "70", "height": "70" },
          active: { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01AR0zhN1EUdMZcfSCz_!!2185320355.png", "name": "7.png", "width": "153", "height": "131" },
        },
        {
          def: { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01WwpRYn1EUdMTos1QV_!!2185320355.png", "name": "88.png", "width": "70", "height": "70" },
          active: { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01kkbTN11EUdMSUt8h4_!!2185320355.png", "name": "8.png", "width": "138", "height": "131" },
        },
      ]
    },
    curIdx: 0,
  },
  onLoad(query) {
    console.log('page onLoad', query)

    setTimeout(()=>{
      this.setData({
        curIdx: 4
      })
    },3000)
  },
  onShow() { },
  closeMenu(){
    this.menuRef.closeMenu();
  },

  onRef(ref){
    this.menuRef = ref;
  },
  onUpdateFun(data) {
    console.error("update:", data)
  }
})

• xaml

  <menu gameSource="{{gameSource}}" curIdx="{{curIdx}}" onRef="onRef" onUpdate="onUpdateFun" />
  <view onTap="closeMenu" style="margin-top:200rpx;">关闭菜单</view>