提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  APP

当前栏目

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

2023-02-18 16:27:30 时间

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

好了，先看实现样式：

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

 那就先走第一个图吧，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,
      })
    }
    },

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

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

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

相关文章