这里给大家介绍下我做的一个uni-app的demo:抽奖系统

废话不多说直接上效果图:

线上案例:

首页:

大转盘抽奖页面:

轮播机抽奖页面:

九宫格抽奖页面:

翻牌抽奖页面:

奖品列表页面:

抽奖的思路大家可以参考我的另一篇解析大转盘的文章:

点击这里前往

这里给大家分享下template内容:

	<view class="container">
<view class="bg">
<image :src="imgUrl+'draw-one-bg.png'"></image>
</view>
<view class="main-box">
<view class="title-h1">
<image :src="imgUrl+'draw-one-title.png'"></image>
</view>
<view class="body-one">
<image :src="imgUrl+'draw-one-bg-one.png'"></image>
</view>
<view class="draw-box">
<image :src="imgUrl+'draw-one-bg-two.png'"></image>
<view class="draw-dian">
<image :src="imgUrl+'draw-one-dian.png'" mode="" v-if="dianimage == 0"></image>
<image :src="imgUrl+'draw-one-dian-one.png'" mode="" v-if="dianimage == 1"></image>
</view>
<view class="draw-bg">
<view :class="'body-box '+mainname +' '+endname">
<image :src="imgUrl+'draw-one-box.png'" mode=""></image>
<view :class="'body-main t'+(index+1)" v-for="(item,index) in domearr" :key="index">
<view class="title">
{{item.title}}
</view>
<view class="image">
<image :src="url+item.img"></image>
</view>
</view>
</view>
<view class="draw-btn" @tap="btnFun">
<image :src="imgUrl+'draw-one-main.png'" mode=""></image>
</view>
</view> </view>
<view class="main-title">
您还有<span>{{frequency}}</span>次抽奖机会
</view>
<view class="uni-swiper">
<view class="swiper">
<swiper :indicator-dots="indicator" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true" class="swiper">
<swiper-item>
<view class="text">
恭喜 樱桃小丸子 抽到88元现金红包
</view>
</swiper-item>
<swiper-item>
<view class="text">
恭喜 樱桃小丸子 抽到88元现金红包
</view>
</swiper-item>
</swiper>
</view>
<view class="swiper-bg">
<image :src="imgUrl+'draw-one-swiper.png'" mode=""></image>
</view>
</view>
</view>
</view>

如果需要全套demo,可以加我微信(zlhd15)获得。

demo介绍:uni-app统合--各类大转盘demo介绍的更多相关文章

  1. 大转盘Demo

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. PHP实现大转盘抽奖算法实例

    本文主要向大家介绍了PHP语言实现大转盘抽奖算法,通过具体的实例向大家展示,希望对大家学习PHP抽奖有所帮助. 流程:1.拼装奖项数组,2.计算概率,3.返回中奖情况 代码如下:中奖概率 ' v ' ...

  3. asp.net+jQueryRotate开发幸运大转盘

    在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...

  4. 小程序 大转盘 抽奖 canvas animation

    项目需求运用到大转盘 可设置概率 可直接自定义结果 效果如下

  5. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  6. 用c#开发微信 (15) 微活动 1 大转盘

    微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...

  7. 纯CSS3大转盘抽奖(响应式、可配置)

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

  8. 上门洗车APP --- Androidclient开发 之 项目结构介绍

    上门洗车APP --- Androidclient开发 之 项目结构介绍 前言 尽管公司项目较紧,但还是抽空给大家继续更新. o_O"~ 欢迎大家的关注,非常高兴和大家共同学习.前面给大家分 ...

  9. php 大转盘抽奖

    包在文件中 lottery.zip <!DOCTYPE HTML><html><head><meta charset="utf-8"> ...

  10. WeMall微信商城源码插件大转盘代码详情

    WeMall微信商城源码插件大转盘代码是用于商业推广的比较有效的方式,分享了部分比较重要的代码,供技术员学习参考 代码详情地址:http://addon.wemallshop.com/Product/ ...

随机推荐

  1. MySQL 报错:ERROR 2002 (HY000): Can't connect to local MySQL server through socket

    MySQL 报错:ERROR 2002 (HY000): Can't connect to local MySQL server through socket 一.错误现场还原: 下面我们通过三种方式 ...

  2. NEMU PA 4 实验报告

    一.实验目的 在前面的PA123中,我们分别实现了基本的运算单元,实现了各种指令和程序的装载,实现了存储器的层次结构.而在PA4中,为了让NEMU可以处理异常情况以及和外设交互,我们要做的事情有以下: ...

  3. Codeforces Global Round 22 A-E

    比赛链接 A 题解 知识点:贪心. 显然交错释放最好. 若两类数量不一样,那么较少的一组的一定都可以双倍,剩下的另一组就放进一个优先队列,从大到小和少的一组匹配可以双倍,剩下的直接加. 如果两类数量一 ...

  4. NC235745 拆路

    题目链接 题目 题目描述 有 \(n\) 个城镇,城镇之间有 \(m\) 条道路相连,道路可以看成无向边.每一个城镇都有自己的一个繁荣度 \(v_i\) ,一个城镇 \(u\) 受到的影响 \(p\) ...

  5. test-02-java 单元测试框架 junit5 入门介绍

    拓展阅读 junit5 系列 基于 junit5 实现 junitperf 源码分析 Auto generate mock data for java test.(便于 Java 测试自动生成对象信息 ...

  6. 【leetcode】合并 k 个有序链表,我给了面试官这 5 种解法

    开胃菜 在进入本节的正题之前,我们先来看一道开胃菜. 题目 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1 ...

  7. Django实战之文件上传下载

    项目介绍 最近学习django,通过文件上传下载这个小项目,总结下常用的知识点. 做这个案例我有以下需求: 1.要支持一次上传多个文件 2.支持上传后记录上传的数据以及列表展示 3.支持下载和删除文件 ...

  8. Java并发编程实例--14.在一个同步类中安排独立属性

    当你使用synchronized关键字去保护一个代码块时,你必须传入一个对象的引用. 正常来讲,你讲使用this关键字去引用执行这个方法的对象,但是你可以使用其他对象的引用. 通常的,这些对象将会是专 ...

  9. 实操开源版全栈测试工具RunnerGo安装(二)Linux安装

    手动安装(支持Linux.MacOS.Windows) Linux安装步骤 以debian系统为例,其他linux系统参考官方文档:https://docs.docker.com/engine/ins ...

  10. SBI信息反馈法

    https://baijiahao.baidu.com/s?id=1605128367255769158&wfr=spider&for=pc