更新记录

1.0.2（2023-05-10）

horizontal-scroll

horizontal-scroll 横向滚动抽奖 涉及的图片请自行引入

属性说明

使用示例

<horizontal-scroll
  :goodsDetails="goodsDetails"
  :winningId="winningId"
>
</horizontal-scroll>

import horizontalScroll from '../components/horizontal-scroll/horizontal-scroll.vue'
export default {
  components: {
    horizontalScroll
  },
  data() {
    return {
     goodsDetails:[
        {id:222,color:'#CCCCFF',prize_level:10},
        {id:223,color:'#FFCCCC',prize_level:1},
        {id:224,color:'#99CC99',prize_level:4},
        {id:225,color:'#CCFFFF',prize_level:2},
        {id:226,color:'#CCFF99',prize_level:10},
        {id:227,color:'#99CCFF',prize_level:4},
        {id:228,color:'#66CCCC',prize_level:4},
        {id:229,color:'#6699CC',prize_level:3},
        {id:232,color:'#666699',prize_level:1},
        {id:233,color:'#CC3399',prize_level:1},
        {id:234,color:'#99CC33',prize_level:1},
        {id:235,color:'#666699',prize_level:1},
        {id:236,color:'#CC9999',prize_level:1},
        {id:237,color:'#336699',prize_level:1},
        {id:238,color:'#006699',prize_level:3},
        {id:239,color:'#333399',prize_level:1},
        {id:240,color:'#99CCCC',prize_level:1},
        {id:241,color:'#3399CC',prize_level:2},
        {id:242,color:'#FF6600',prize_level:1},
        {id:243,color:'#666699',prize_level:1},
        {id:244,color:'#FFCCCC',prize_level:1},
        {id:245,color:'#FF9999',prize_level:2},
        {id:246,color:'#FF99CC',prize_level:1},
        {id:247,color:'#CC3399',prize_level:1},
        {id:248,color:'#006633',prize_level:4},
        {id:249,color:'#CCCC66',prize_level:1},
        {id:250,color:'#CCCCFF',prize_level:1},
        {id:252,color:'#666600',prize_level:1},
        {id:253,color:'#CCCC33',prize_level:1},
        {id:254,color:'#663300',prize_level:10},
        {id:255,color:'#99CCFF',prize_level:2},
        {id:256,color:'#006699',prize_level:1},
        {id:257,color:'#336600',prize_level:1},
        {id:258,color:'#CCCC66',prize_level:1},
        {id:259,color:'#999999',prize_level:1},
        {id:260,color:'#FFCCCC',prize_level:1}

     ],
     winningId:'240', //中奖id
    }
  }
}

效果图

1.0.1（2022-10-26）

横屏滚动抽奖动效

平台兼容性

horizontal-scroll

horizontal-scroll 横向滚动抽奖 涉及的图片请自行引入

属性说明

使用示例

<horizontal-scroll
  :goodsDetails="goodsDetails"
  :winningId="winningId"
>
</horizontal-scroll>

import horizontalScroll from '../components/horizontal-scroll/horizontal-scroll.vue'
export default {
  components: {
    horizontalScroll
  },
  data() {
    return {
     goodsDetails:[
        {id:222,color:'#CCCCFF',prize_level:10},
        {id:223,color:'#FFCCCC',prize_level:1},
        {id:224,color:'#99CC99',prize_level:4},
        {id:225,color:'#CCFFFF',prize_level:2},
        {id:226,color:'#CCFF99',prize_level:10},
        {id:227,color:'#99CCFF',prize_level:4},
        {id:228,color:'#66CCCC',prize_level:4},
        {id:229,color:'#6699CC',prize_level:3},
        {id:232,color:'#666699',prize_level:1},
        {id:233,color:'#CC3399',prize_level:1},
        {id:234,color:'#99CC33',prize_level:1},
        {id:235,color:'#666699',prize_level:1},
        {id:236,color:'#CC9999',prize_level:1},
        {id:237,color:'#336699',prize_level:1},
        {id:238,color:'#006699',prize_level:3},
        {id:239,color:'#333399',prize_level:1},
        {id:240,color:'#99CCCC',prize_level:1},
        {id:241,color:'#3399CC',prize_level:2},
        {id:242,color:'#FF6600',prize_level:1},
        {id:243,color:'#666699',prize_level:1},
        {id:244,color:'#FFCCCC',prize_level:1},
        {id:245,color:'#FF9999',prize_level:2},
        {id:246,color:'#FF99CC',prize_level:1},
        {id:247,color:'#CC3399',prize_level:1},
        {id:248,color:'#006633',prize_level:4},
        {id:249,color:'#CCCC66',prize_level:1},
        {id:250,color:'#CCCCFF',prize_level:1},
        {id:252,color:'#666600',prize_level:1},
        {id:253,color:'#CCCC33',prize_level:1},
        {id:254,color:'#663300',prize_level:10},
        {id:255,color:'#99CCFF',prize_level:2},
        {id:256,color:'#006699',prize_level:1},
        {id:257,color:'#336600',prize_level:1},
        {id:258,color:'#CCCC66',prize_level:1},
        {id:259,color:'#999999',prize_level:1},
        {id:260,color:'#FFCCCC',prize_level:1}

     ],
     winningId:'240', //中奖id
    }
  }
}

效果图