【黄啊码】如何用小程序实现世界杯参赛队伍投票

本次只分享小程序端的代码实现，后端每个人都有自己的实现方法，就不写在此。

好了，先看实现样式：

本次投票实现需要一个页面和一个弹窗实现，我们做的是淘汰赛部分，在此，黄啊码将淘汰赛部分直接选用选择队伍投票方式，比分这块实现方式其实也类似：

那就先走第一个图吧，wxml如下：

<view  class="contain item"><view wx:for="{{all_list}}" wx:key="index"  wx:for-item="item" style="border-bottom: 1px solid #36a2e6;"><view class="date"><view class="game-type"><text>淘汰赛</text></view><text>2022-12-15</text><view>猜中积分<text style="color: rgb(255, 26, 26);font-weight: bold;">+500}</text></view></view><view class="guess_item"><view class="time"><text space="nbsp">12月15日 03:00半决赛</text></view><view class="country"><view class="country-item"><text space="emsp">法国 </text><image src="{{img_url+item.country_flag1}}" /></view><view class="vs">VS</view><view class="country-item diff"><image src="{{img_url+item.country_flag2}}" /><text space="emsp">摩洛哥</text></view></view><view class="btn_box"><button>参与竞猜</button></view><view class="result"><view class="pre-item"><span>我的预测</span><view><text space="ensp" style="color: #3c3c3c;">---</text></view></view><view class="line"></view><view class="pre-item"><view>未参与竞猜</view></view></view></view></view></view>
</view>

wxss如下：【对应颜色有做调整，别顾着照抄哦】

.item {margin: 20rpx;border-bottom: 4rpx solid #36a2e6;
}
.contain .item:last-child{border-bottom: 0; overflow: hidden;
}
.item_index{margin-left: 20rpx;font-size: 32rpx;color: #36a2e6;
}
.item .guess_item {width: 100%;height: 410rpx;background-color: #fff;border-radius: 8px;position: relative;
}
.item .date {display: flex;position: relative;justify-content: space-between;height: 130rpx;line-height: 130rpx;font-size: 30rpx;color: #36a2e6;    margin: 0rpx 25rpx;
}
.item .date .game-type {position: absolute;top: -1rpx;left: -26rpx;width: 110rpx;height: 42rpx;line-height: 42rpx;background-color: #36a2e6;text-align: center;border-bottom-right-radius: 22rpx;font-size:24rpx;color: #fff;
}
.item .time {height: 70rpx;line-height: 70rpx;text-align: center;color: rgb(66, 66, 66);font-size: 28rpx;margin-left: 11rpx;
}
.item .guess_item .country{display: flex;margin-top: 16rpx;
}.country-item {width: 40%;height: 48rpx;display: flex;align-items: center;justify-content: flex-end;font-size: 30rpx;
}.diff {justify-content: flex-start;
}
.item .guess_item .country .country-item image {width: 82rpx;height: 100%;
}
.item .guess_item .country .country-item text {color: rgb(46, 46, 46);
}
.item .guess_item .country .vs {width: 20%;text-align: center;height: 48rpx;line-height: 48rpx;color: rgb(255, 26, 26);font-weight: bold;font-size: 32rpx;
}
.item .guess_item .btn_box {display: flex;justify-content: center;height: 130rpx;line-height: 130rpx;align-items: center;
}
.item .guess_item .btn_box .btn {width: 220rpx;height: 58rpx;line-height: 58rpx;text-align: center;background-color: #ffc320;color: #fff;border-radius: 30rpx;font-size: 29rpx;
}
.item .guess_item .btn_box button {width: 220rpx;height: 52rpx;font-weight: unset;
}
.item .guess_item .btn_box text {color:#3c3c3c;font-size: 30rpx;
}
.item .guess_item .result {display: flex;justify-content: space-between;
}.item .guess_item .result .pre-item text {width: 50%;text-align: center;
}
.item .guess_item .result .pre-item {width: 44%;height: 110rpx;display: flex;flex-direction: column;align-items: center;
}
.item .guess_item .result .pre-item span {width: 76%;display: block;height: 52rpx;font-size: 28rpx;color:#36a2e6;text-align: center;line-height: 52rpx;border: 4rpx solid #36a2e6;border-radius: 32rpx;
}
.item .guess_item .result .pre-item view {width: 80%;height: 58rpx;text-align: center;line-height: 82rpx;font-size: 30rpx;color: rgb(255, 26, 26);
}
.line {width: 0;height: 64rpx;border-left:1rpx solid #36a2e6;border-right: 1rpx solid #36a2e6;background-color: #36a2e6;
}
.submit_box {position: fixed;top: 356rpx;left: 50%;transform: translateX(-50%);width: 92%;height: 42%;background-image:linear-gradient(to bottom,#36a2e6,#fff);opacity: 0.92;border-radius: 24rpx;box-shadow: 2rpx 2rpx 16rpx 4rpx #d4d4d4;border: 2rpx solid #36a2e6;
}.submit_box .tip {height: 150rpx;text-align: center;line-height: 150rpx;font-size: 34rpx;color: #fff;
}
.submit_box .score {display: flex;justify-content: center;align-items: center;
}
.submit_box .score input {width: 86rpx;height: 86rpx;background-color: #fff;border-radius: 8rpx;margin: 0 46rpx;font-size: 36rpx;font-weight: bold;color: rgb(0, 0, 0);text-align: center;
}
.submit_box .score view {width: 40rpx;height: 8rpx;background-color: #fff;
}.close {height: 70rpx;display: flex;justify-content: flex-end;
}.close view {width: 76rpx;height: 66rpx;line-height: 64rpx;text-align: center;
}
.icon-guanbi {color: #fff;
}.sub_btn_box {height: 180rpx;display: flex;justify-content: center;align-items: center;
}.sub_btn_box .sub_btn {width: 300rpx;height: 70rpx;line-height: 70rpx;background-color: #ffc320;text-align: center;border-radius: 14rpx;font-size: 34rpx;color: #fff;
}
.end {position: absolute;width:460rpx;height:100rpx;text-align: center;line-height: 100rpx;top: 194rpx;left: 50%;border-radius: 20rpx;transform: translateX(-50%);text-align: center;font-size: 28rpx;color: rgb(255, 26, 26);
}

接下来是弹出窗体的wxml代码和wxss代码

<view class="choose_box">

<view bindtap="chooseFn" class="left {{is_choose1?'choose_color':''}}" data-id="1">猜TA胜</view>

<view bindtap="chooseFn" class="{{is_choose2?'choose_color':''}}" data-id="2">平局</view>

<view bindtap="chooseFn" class="right {{is_choose3?'choose_color':''}}" data-id="3" >猜TA胜</view>

</view>

.choose_box {

display: flex;

justify-content: center;

}

.choose_box view {

width: 178rpx;

height: 74rpx;

line-height: 74rpx;

background-color: #fff;

margin: 0 1rpx;

text-align: center;

border:2rpx solid #36a2e6;

color: #36a2e6;

}

.choose_box .choose_color {

background-color: #36a2e6;

color: #fff;

}

.choose_box .left{

border-top-left-radius: 22rpx;

border-bottom-left-radius: 22rpx;

}

.choose_box .right{

border-top-right-radius: 22rpx;

border-bottom-right-radius: 22rpx;

}

最后实现的时候别忘了把点击事件加上

这里的dataset.id表示的是你选中的国家id，我在上边代码就直接省略了，毕竟每个认对于变量的命名都有所不同。

chooseFn(e) {if(e.currentTarget.dataset.id=="1") {this.setData({is_choose1:true,is_choose2:false,is_choose3:false,})}else if(e.currentTarget.dataset.id=="2") {this.setData({  is_choose1:false,is_choose2:true,is_choose3:false,})}else if(e.currentTarget.dataset.id=="3") {this.setData({  is_choose1:false,is_choose2:false,is_choose3:true,})}},

至于如何弹窗和关闭事件这个部分，我相信大多数只要入门过小程序的都知道，我就不一一阐述了，如果再不懂直接扣我也行。

好了，今天的分享就这里，有问题的留个言，别忘了一键三连，下次我们还会再见！

我是黄啊码，码字的码，退。。。退。。。退。。。朝！

【黄啊码】如何用小程序实现世界杯参赛队伍投票相关推荐

【黄啊码】微信小程序外卖项目显示骑手位置
小demo,不太建议完全照抄,需要的可以在上边完成拓展,不喜勿喷!!! 这个功能最重要的就是路线规划,路线两端分别是点外卖的人,商家,送外卖的骑手,商家的位置,后端接口直接就能拿到给前端,而用户的位置 ...
如何用小程序玩转裂变？你要的小程序裂变营销都在这里
我们经常在网上亦或者是一些手机上看到有很多商家在看好小程序这个平台.的确,对于当今而言,受热捧的也就是微信了,要知道这微信的用户数量已然成为一个庞然大物的存在,这既让很多小伙伴们震惊,而且又让一些商家 ...
扫码点餐小程序源码_扫码点餐小程序有什么用？怎么制作？
现在小程序扫码点餐服务已经越来越普及,当用户需要点餐时,无需麻烦服务人员,只需扫描餐桌上或者海报上的小程序码,就能快速点餐下单.这样不仅节约了排队时间,也提高了商家自己的服务效率. 上线了小程序案例, ...
医疗小程序源码_零售小程序源码，零售小程序商城
零售小程序开发(贺经理:188微1924电2925同号),零售小程序定制,零售小程序源码,零售小程序商城,零售商城小程序,零售小程序平台,零售小程序软件,开发零售小程序,近年来,实体经济转型.商流量红 ...
微信扫码点餐小程序怎么做，一步步教你
在当今数字化时代,更多的餐厅开始使用扫码点餐系统.这种系统可以提高顾客的点餐效率,减少服务员的工作负担.如果你也想要在你的餐厅中使用扫码点餐系统,那么你来对地方了. 第一步:搭建微信小程序后台在微信 ...
微信小程序实现微信APP上的扫一扫扫码跳到小程序对应的结果页面和签字等功能
最近做了一个小程序项目,这个小程序是搭配APP端使用的,大概需求是这样的,用户用微信的扫一扫或小程序首页的扫一扫都可以实现对APP上的二维码进行扫码识别,识别成功之后跳到页面进行渲染,然后用户可以对其 ...
微信读书登陆界面java_（JAVA后端）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好...
转载地址:(JAVA后端)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好转载请注明出处一.环境搭建相关环境软件:JDK1 ...
扫描二维码打开微信小程序，携带参数，含配置和代码详解
今天有个新需求,需要用户扫码打开我们小程序,需要携带信息记录邀请人是谁. 废话不多说,我们进入主题,首先要到小程序里面做配置.在开发管理里面,找到开发配置,往下滑到扫普通链接二维码打开小程序配置项里, ...
[含文档+源码等]微信小程序校园生活小助手+后台管理系统前后分离VUE[包运行成功]
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 [含文档+源码等]微信小程序校园生活小助手+后台管理系统前后分离V ...

【黄啊码】如何用小程序实现世界杯参赛队伍投票

【黄啊码】如何用小程序实现世界杯参赛队伍投票相关推荐

最新文章

热门文章