小程序模板網(wǎng)

微信小程序營銷組件wxapp-market

發(fā)布時(shí)間:2018-10-19 10:44 所屬欄目:小程序開發(fā)教程

wxapp-market 是基于微信小程序的營銷組件,用于快速開發(fā)營銷玩法類小程序項(xiàng)目頁面,包含大轉(zhuǎn)盤、刮刮樂、***、水果機(jī)、九宮格翻紙牌、搖一搖、手勢解鎖等多種營銷組件。

使用

1.拉取倉庫

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

2.組件文件

  • 大轉(zhuǎn)盤 (Big wheel) : /components/wheel/
  • 刮刮樂 (Scratch tickets) : /components/scratch/
  • *** (Slot machine) : /components/slotMachine/
  • 水果機(jī) (Fruit machine) : /components/fruitMachine/
  • 九宮格翻紙牌 (Grid card) : /components/card/
  • 搖一搖 (Shake) : /components/shake/
  • 手勢解鎖 (Gesture lock) : /components/lock/

3.調(diào)用
以大轉(zhuǎn)盤組件為例

WXSS中引用樣式:

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

WXML中引用結(jié)構(gòu):

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

JS中引用:

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

JS中實(shí)例調(diào)用:

 
 new Wheel(this,{
    areaNumber: 8,   //抽獎(jiǎng)間隔
    speed: 16,       //轉(zhuǎn)動(dòng)速度
    awardNumer: 2,   //中獎(jiǎng)區(qū)域從1開始
    mode: 1,         //1是指針旋轉(zhuǎn),2為轉(zhuǎn)盤旋轉(zhuǎn)
    callback: (idx, award) => {      //結(jié)束回調(diào), 參數(shù)對(duì)應(yīng)宮格索引,對(duì)應(yīng)獎(jiǎng)項(xiàng)    
    }
  })

運(yùn)行效果:

大轉(zhuǎn)盤



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24896.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢