微信小程序抽奖转盘实现案例

也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

最终效果图

1 wxml 布局文件

<view class="activitymain"><!-- 中奖用户提示 --><view class="container_act"><view class="news flex-row"><image src="/img/draw_notice.png" class="img-35 notice-img"></image><swiper class="swiper" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'><block wx:for-index="idx" wx:for='{{list}}' wx:key="index"><swiper-item><view class='content-item'><text class="ml30" decode="{{true}}">恭喜用户&nbsp;&nbsp;&nbsp;</text><text class="high-light">{{item.phone}}</text><text decode="{{true}}">&nbsp;&nbsp;{{item.name}}</text></view></swiper-item></block></swiper></view><!-- 转盘 --><view class="draw"><view class="draw_view flex-row jb"><view class="item {{turnplateList[0].status ? 'op1' : ''}}"><image src="{{turnplateList[0].img}}" class="item-img"></image><view>{{turnplateList[0].name}}</view></view><view class="item {{turnplateList[1].status ? 'op1' : ''}}"><image src="{{turnplateList[1].img}}" class="item-img"></image><view>{{turnplateList[1].name}}</view></view><view class="item {{turnplateList[2].status ? 'op1' : ''}}"><image src="{{turnplateList[2].img}}" class="item-img"></image><view>{{turnplateList[2].name}}</view></view><view class="item {{turnplateList[3].status ? 'op1' : ''}}"><image src="{{turnplateList[3].img}}" class="item-img"></image><view>{{turnplateList[3].name}}</view></view><view class="item no-bg"><image wx:if="{{drawLuck}}" src="/img/chose.png" class="draw-img" bindtap="drawLuck"></image><image wx:else src="/img/chosed.png" class="draw-img"></image></view><view class="item {{turnplateList[4].status ? 'op1' : ''}}"><image src="{{turnplateList[4].img}}" class="item-img"></image><view>{{turnplateList[4].name}}</view></view><view class="item {{turnplateList[5].status ? 'op1' : ''}}"><image src="{{turnplateList[5].img}}" class="item-img"></image><view>{{turnplateList[5].name}}</view></view><view class="item {{turnplateList[6].status ? 'op1' : ''}}"><image src="{{turnplateList[6].img}}" class="item-img"></image><view>{{turnplateList[6].name}}</view></view><view class="item {{turnplateList[7].status ? 'op1' : ''}}"><image src="{{turnplateList[7].img}}" class="item-img"></image><view>{{turnplateList[7].name}}</view></view></view></view><view class="choice">您还有{{draw_count}}次抽奖机会</view></view><!-- 活动商品 --><view class="goodslist"><view class="result_title">活动商品</view><view class="shop_info" wx:for="{{3}}"><view class="item"><image src="https://i.postimg.cc/NGN7JqRB/222.webp" class="item-img"></image><view class="goods_info"><text class="title">测试商品</text><view class="price"><text>价格 $90</text><button plain="true" type="warn" size="mini">立即购买</button></view></view></view></view></view><!-- 抽奖规则 --><view class="resultrule"><view class="result_title">抽奖规则</view><view class="result_info"><scroll-view scroll-y="true" style="height: 200rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"><block wx:for="{{resultList}}" wx:key="index"><view class="goods_name">{{item.name}}</view></block></scroll-view></view></view><!-- 抽奖记录 --><view class="result"><view class="result_title">我的抽奖记录</view><view class="result_info"><scroll-view scroll-y="true" style="height: 200rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"><block wx:for="{{resultList}}" wx:key="index"><view class="goods_name">{{item.name}}</view></block></scroll-view></view></view></view>

2 wxss 样式文件

.activitymain {background-image: linear-gradient(#eb1c1c, #b92b2b);padding: 22rpx;
}.container_act {border: 1px solid #FF9800;border-radius: 20rpx;color: #fff;box-shadow: 0px 4px 4px 0 #FF5722;/* height: 300px; */padding: 30rpx;
}.news {margin: 20rpx auto;width: 100%;/* border: 1px solid black; */height: 30px;line-height: 30px;border-radius: 30rpx;background-color: rgb(229, 149, 149);
}.notice-img {padding: 0 30rpx;
}.swiper {width: 90%;height: 100%;font-size: 25rpx;
}.content-item {max-width: 600rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.high-light {color: #eccb39;
}.draw {/* border: 1px solid black; */margin-top: 50rpx;width: 100%;/* height: 350px; */border-radius: 20rpx;box-shadow: 0 0 7rpx 0 rgba(0, 137, 254, 0.45), 0 0 18rpx 0 #FFFFFF;
}.draw_view {flex-wrap: wrap;padding: 30rpx;
}.item {width: 31%;/* border: 1px solid black; */height: 90px;margin-bottom: 30rpx;background-color: #fff;color: #b90c0c;border-radius: 20rpx;font-size: 26rpx;text-align: center;
}.item-img {margin-top: 10rpx;width: 60px;height: 60px;border-radius: 10rpx;
}.choice {margin-top: 30rpx;text-align: center;font-size: 28rpx;
}.draw-img {height: 100%;width: 100%;
}.no-bg {background: none;
}.op1 {border: 5rpx solid #ac1010;box-shadow: inset -4rpx -23rpx 20rpx 20rpx #ce1e1e;border-radius: 20rpx;box-sizing: border-box;
}.result {/* border: 1px solid rebeccapurple; */margin: 60rpx 20rpx;border-radius: 20rpx;height: 200px;box-shadow: 0 0 98rpx 0 #FFFFFF inset;text-align: center;
}.resultrule {/* border: 1px solid rebeccapurple; */margin: 60rpx 20rpx;border-radius: 20rpx;height: 200px;box-shadow: 0 0 8rpx 0 #FFFFFF inset;text-align: center;
}.goodslist {/* border: 1px solid rebeccapurple; */margin: 60rpx 20rpx;border-radius: 20rpx;height: auto;box-shadow: 0 0 8rpx 0 #FFFFFF inset;text-align: center;
}
.goodslist .result_title{color: white;font-weight: 600;padding-top: 30rpx;margin-bottom: 20rpx;
}.result_title {color: white;font-weight: 600;padding-top: 30rpx;
}.result_info {/* border: 1px solid red; */margin: 20rpx;height: 200rpx;
}.goods_name {color: #fff;padding: 10rpx;font-size: 28rpx;
}/**app.wxss**/
.flex-row {display: flex;flex-direction: row;align-items: center;
}.flex-column {display: flex;flex-direction: column;align-items: center;
}.jb {justify-content: space-between;
}.img-35 {width: 35rpx;height: 35rpx;
}.shop_info {margin-left: 22rpx;margin-right: 22rpx;display: flex;flex-direction: row;justify-content: start;
}.shop_info .item {width: 100%;height: auto;justify-content: start;display: flex;margin-bottom: 30rpx;padding: 12rpx;background-color: #fff;color: #b90c0c;border-radius: 20rpx;font-size: 26rpx;text-align: center;
}.shop_info .goods_info {justify-content: start;display: flex;margin-top: 10rpx;flex-direction: column;align-items: start;/* width: 100%; */padding-left: 12rpx;flex: 1;
}.shop_info .goods_info .title {font-weight: 500;font-size: 32rpx;color: #000;
}.shop_info .item-img {FONT-VARIANT: JIS78;FONT-WEIGHT: 600;margin-top: 10rpx;width: 85rpx;height: 85rpx;border-radius: 10rpx;
}.shop_info .goods_info .price {font-size: 22;color: #ac1010;display: flex;justify-content: left;width: 100%;
}.shop_info .goods_info .price text {flex: 1;text-align: start;
}.shop_info .goods_info .price button{width: 160rpx;font-size: 22rpx;
}

3 JS 文件

// 获取应用实例
const app = getApp()
//计数器
var interval = null;
//值越大旋转时间越长  即旋转速度
var intime = 50;
Page({data: {resultList:[],luckPosition:5,drawLuck:true,list:[{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品"},{phone: "188****3434", name: "抽中半价商品抽中半价商品抽中半价商品抽中半价商品"},],turnplateList:[{id: "1", name: "测试商品1", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "2", name: "测试商品2", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "3", name: "测试商品3", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "4", name: "测试商品4", img:'/img/test.png',is_turnplateList:'0',status:false},{id: "5", name: "测试商品5", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "6", name: "测试商品6", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "7", name: "测试商品7", img:'/img/test.png',is_turnplateList:'1',status:false},{id: "8", name: "测试商品8", img:'/img/test.png',is_turnplateList:'0',status:false},],draw_count:'5',},// 事件处理函数onLoad() {},drawLuck(){if(this.data.draw_count==0){wx.showToast({title: '您的抽奖次数已经用光了',icon:'none'})return false}this.setData({drawLuck:false})let that=this;//定时器clearInterval(interval)var index=0;interval=setInterval(function(){if(index>7){index=0;that.data.turnplateList[7].status = false}else if (index != 0) {that.data.turnplateList[index - 1].status = false}that.data.turnplateList[index].status = truethat.setData({turnplateList: that.data.turnplateList,})index++;},intime)console.log(this.data.turnplateList)//模拟网络请求时间  设为两秒var stoptime = 2000;setTimeout(function () {that.stop(that.data.luckPosition);}, stoptime)},stop: function (which){var e = this;//清空计数器clearInterval(interval);//初始化当前位置var current = -1;var turnplateList = e.data.turnplateList;for (var i = 0; i < turnplateList.length; i++) {if (turnplateList[i] == 1) {current = i;}}//下标从1开始var index = current + 1;e.stopLuck(which, index, intime, 10);},stopLuck: function (which, index, time, splittime) {var that = this;//值越大出现中奖结果后减速时间越长var turnplateList = that.data.turnplateList;setTimeout(function () {//重置前一个位置if (index > 7) {index = 0;turnplateList[7].status = false} else if (index != 0) {turnplateList[index - 1].status = false}//当前位置为选中状态turnplateList[index].status = truethat.setData({turnplateList: turnplateList,})//如果旋转时间过短或者当前位置不等于中奖位置则递归执行//直到旋转至中奖位置if (time < 400 || index != which) {//越来越慢splittime++;time += splittime;//当前位置+1index++;that.stopLuck(which, index, time, splittime);} else {//1秒后显示弹窗setTimeout(function () {let turnplateList_info = that.data.turnplateList[which];let title = '';if (turnplateList_info.is_turnplateList == 1) {title = '恭喜你抽中了' + turnplateList_info.name;let resultList=[]resultList.push(turnplateList_info)that.setData({resultList:that.data.resultList.concat(resultList)})console.log(that.data.resultList)} else {title = '很遗憾未中奖';}wx.showModal({title: '提示',content: title,showCancel: false,success: function (res) {if (res.confirm) {let draw_count=that.data.draw_count;draw_count--;console.log(draw_count)that.setData({drawLuck: true,luckPosition: 0,draw_count:draw_count})}}})}, 1000);}}, time);},upper(e) {console.log(e)},lower(e) {console.log(e)},scroll(e) {console.log(e)},scrollToTop() {this.setAction({scrollTop: 0})},
})

完毕

微信小程序抽奖转盘实现案例相关推荐

微信小程序抽奖转盘v1.1（更新圈数控制和速度控制）
因业务需要一个抽奖大转盘,时间紧迫就去网上找了一个仿天猫的抽奖转盘.但是发现他有很多问题,例如无法设定结果,代码混乱等.我的这个是在他基础之上修改,原帖地址找不到了... github:https:/ ...
微信小程序，转盘抽奖
微信小程序大转盘代码源码:https://github.com/yewook/Lottery-turntable 转载于:https://www.cnblogs.com/yewook/p/97171 ...
【vue uniapp 小程序抽奖转盘老虎机和九宫格】
vue uniapp 小程序抽奖转盘老虎机和九宫格 1.npm 下载插件 # npm 安装 npm install @lucky-canvas/vue@latest# 或者 yarn 安装 yarn ...
微信小程序前后端交互案例
微信小程序前后端交互案例首先声明一下,本人也是一个初学者(下面的案例可能会有很多不完整或说的不正确的,所以只能起到参考作用,千万不要拿我的话当标准). 我是纯自学,之前在前后端交互方面一直搞不懂,所 ...
微信小程序云开发完整案例
微信小程序云开发完整案例本项目获高校微信小程序开发大赛华中赛区三等奖 [注]: 本人对该程序功能.UI等方面比较满意,分析总结了比赛成绩不算太好的原因,下一篇博客具体分享,给想参加该比赛的同学一些参 ...
微信小程序抽奖简单功能实现
抽奖是一种常见的互动活动,在微信小程序中也有很多不同的实现方式.以下是一份简单的微信小程序抽奖源码,供参考:在 wxml 文件中添加抽奖的页面布局: <view class="cont ...
微信小程序大转盘完整代码
微信小程序大转盘完整代码效果图 wxml片段  <view class="container"><image sr ...
PHP微信小程序/抽奖小程序开源源码
简介: PHP微信小程序/抽奖小程序开源源码网盘下载地址: http://kekewl.net/n066JfGL5sU0 图片:
做一个好看的微信小程序抽奖页面
在微信小程序中做一个好看的抽奖界面先上图片吧: 基本上格式就是八个抽奖按钮,中间一个开始按钮,后面在加一张好看的背景图就完事啦接下来就是代码啦: js中: var app = getApp() P ...
微信小程序抽奖插件分享
微信小程序开发抽奖功能分享小程序抽奖插件github地址该网站有这么多示例可以选择下面演示编写如何在微信小程序中使用 1.先找到小程序项目的根目录,看是否有package.json文件,如果没有 ...

微信小程序抽奖转盘实现案例

1 wxml 布局文件

2 wxss 样式文件

3 JS 文件

微信小程序抽奖转盘实现案例相关推荐

最新文章

热门文章