game-card1 v0.0.7

game-card1

组件

安装

npm install game-card1

使用

• json

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

• js

Page({
  data: {
    imgData: [
      [
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01c8lqz41FJvnKS0gWz_!!1080040467.png", title: "品牌课程：古驰艺术回顾讲座", desc: "130年的意大利杰作，展示过去四十年创作", logo: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ZW6qZg1FJvpKCBcWo_!!1080040467.png", name: "古驰官方旗舰店", isBuy: false },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017PmaYZ1FJvoyet5Bm_!!1080040467.jpg", title: "LV x YK CAPUCINES BB", price: "¥ 20,000", logo: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ZW6qZg1FJvpKCBcWo_!!1080040467.png", name: "古驰官方旗舰店", isBuy: true },
      ],
      [
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017PmaYZ1FJvoyet5Bm_!!1080040467.jpg", noIcon: true },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01c8lqz41FJvnKS0gWz_!!1080040467.png" },
      ],
      [
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01egTq2A1FJvoiQeBVE_!!1080040467.png" },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017PmaYZ1FJvoyet5Bm_!!1080040467.jpg" },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01c8lqz41FJvnKS0gWz_!!1080040467.png" },
      ],
      [
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN011kwoOL1FJvn2GsvDY_!!1080040467.png" },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017PmaYZ1FJvoyet5Bm_!!1080040467.jpg" },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01c8lqz41FJvnKS0gWz_!!1080040467.png" },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017PmaYZ1FJvoyet5Bm_!!1080040467.jpg" },
      ],
      [
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01eZEEaf1FJvmo7oYBh_!!1080040467.png" },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017PmaYZ1FJvoyet5Bm_!!1080040467.jpg" },
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01c8lqz41FJvnKS0gWz_!!1080040467.png" },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017PmaYZ1FJvoyet5Bm_!!1080040467.jpg" },
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017PmaYZ1FJvoyet5Bm_!!1080040467.jpg" },
      ],
    ]
  },
  onLoad(query) {
    console.log('page onLoad', query)
  },
  onShow() { },
  toFun(e) {
    // 传入imgData数组下标，执行动画
    this.cardRef.go(e.currentTarget.dataset.idx);
  },

  onInitDone(ref) {
    // 初始化回调
    this.cardRef = ref;

    this.toFun({ currentTarget: { dataset: { idx: 0 } } })
  },
  onAniCallback(idx) {
    this.setData({
      activeIdx: idx
    });
    console.error("动画执行完毕：", idx);
  },
  onCallback(item) {
    console.log("点击元素：", item);
  }
})

• xaml

  <view>
    <card1 onInitDone="onInitDone" onAniCallback="onAniCallback" onCallback="onCallback" imgData="{{imgData}}" />
    <view>123</view>
    <view onTap="toFun" data-idx="{{index}}" style="color: {{activeIdx==index?'red':'#000'}};" a:for="{{imgData}}">到{{index}}</view>
  </view>