您当前的位置: 首页 > 解决方案

微信小程序营销组件wxapp-market

  • 作者: admin
  • 发布于 2018-10-20 13:46:44
  • 来源:  
  • 栏目:解决方案

导语: wxapp-market 是基于微信小程序的营销组件,用于快速开发营销玩法类小程序项目页面,包含大转盘、刮刮乐、老虎机、水果机、九宫格翻

 

wxapp-market 是基于微信小程序的营销组件,用于快速开发营销玩法类小程序项目页面,包含大转盘、刮刮乐、老虎机、水果机、九宫格翻纸牌、摇一摇、手势解锁等多种营销组件。

使用

1.拉取仓库

git clone git@github.com:o2team/wxapp-market.git  

2.组件文件

  • 大转盘 (Big wheel) : /components/wheel/
  • 刮刮乐 (Scratch tickets) : /components/scratch/
  • 老虎机 (Slot machine) : /components/slotMachine/
  • 水果机 (Fruit machine) : /components/fruitMachine/
  • 九宫格翻纸牌 (Grid card) : /components/card/
  • 摇一摇 (Shake) : /components/shake/
  • 手势解锁 (Gesture lock) : /components/lock/

3.调用
以大转盘组件为例

WXSS中引用样式:

@import "../../components/wheel/wheel.wxss" 

WXML中引用结构:

<import src="../../components/wheel/wheel.wxml"/> 

JS中引用:

import Wheel from "../../components/wheel/wheel.js" 

JS中实例调用:

  new Wheel(this,{     areaNumber: 8,   //抽奖间隔     speed: 16,       //转动速度     awardNumer: 2,   //中奖区域从1开始     mode: 1,         //1是指针旋转,2为转盘旋转     callback: (idx, award) => {      //结束回调, 参数对应宫格索引,对应奖项         }   }) 

运行效果:

大转盘

01.jpg

02.jpg03.jpg04.jpg05.jpg06.jpg07.jpg

其他

wxapp-market项目地址:https://github.com/o2team/wxa...

 



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部