single-swiper

游戏

安装

npm install single-swiper

使用

• json

{
    "usingComponents": {
        "single-swiper": "single-swiper/single-swiper"
    }
}

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "single-swiper"
  ]
}

• js

Page({
  data: {
    // 轮播组件------------------begin
    swiperData: {
      list: [
        { "imageUrl": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN0112N1qD1FJveqCX3ff_!!1080040467.png", "width": "531", "height": "646", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
        { "imageUrl": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01K0mZC71FJvexnDOpf_!!1080040467.png", "width": "460", "height": "647", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
        { "imageUrl": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DeUFCk1FJveuQtT7M_!!1080040467.png", "width": "520", "height": "651", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
        { "imageUrl": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN012TnI3E1FJvex4siQI_!!1080040467.png", "width": "588", "height": "647", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
        { "imageUrl": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN012nCks81FJvenVWyVv_!!1080040467.png", "width": "486", "height": "647", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
        { "imageUrl": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ADCplq1FJverYEomU_!!1080040467.png", "width": "440", "height": "651", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
        { "imageUrl": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN010Gx2w91FJvex4uSXQ_!!1080040467.png", "width": "520", "height": "648", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
        { "imageUrl": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01r9R22R1FJveqCXvjO_!!1080040467.png", "width": "546", "height": "651", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
        { "imageUrl": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01I9dlJS1FJveq7uK53_!!1080040467.png", "width": "506", "height": "649", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
        { "imageUrl": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN010SR0un1FJveq7wKpP_!!1080040467.png", "width": "506", "height": "646", style: "background-position: center bottom 90rpx;", btns: [{ status: "default", width: 284, height: 68, left: 190, top: 778 }], curStatus: "default" },
      ]
    },
    // 轮播组件------------------end
  },
  onSwiperChange(e) {
    console.log("轮播切换回调", e)
  },
  onSwiperBtnClick(e) {
    let { currentTarget: { dataset } } = e;
    console.log("轮播按钮点击回调", dataset)
  }
})

• xaml

  <single-swiper gameSource="{{swiperData}}" onBtnClick="onSwiperBtnClick" onSwiperChange="onSwiperChange" />