微信小程序开发 单选测试国家

wxml

<view class="qp" wx:if="{{qp}}"></view>
  <view class="cont" wx:for="{{wtlist}}" wx:key="index" style="left:calc({{item.left}} * 100%)">
    <view class="title">{{index+1}}．{{item.title}}</view>
    <view class="xz">
      <view class='da' wx:for="{{item.da}}" wx:for-index="keys" wx:for-item="msg" data-index="{{index}}"   data-key="{{keys}}" bindtap='dj'>
          <view class="left">
            {{keys+1}}、{{msg.nr}}
          </view>
          <view class="right xz" wx:if="{{msg.is}}"><view></view></view>
          <view class="right" wx:else><view></view></view>
          <view style='clear:both'></view>
          <image wx:for="{{msg.img}}" mode='widthFix' wx:for-item="imgs" src="{{imgs}}"></image>
      </view>
    </view>
  </view>
<view class="footer zh" wx:if="{{now >= wtlist.length - 1}}">
  <button class="kx"  bindtap="gb">返回上一问题</button>
  <button class="kx ytj" wx:if="{{status}}" bindtap="tj">提交</button>
  <button class="btj" wx:else>提交</button>
</view>
<view class="footer" wx:elif="{{now != 0}}">
  <button class="kx" bindtap="gb">返回上一问题</button>
</view>

wxss

.cont{
  width:calc(100% - 60rpx);
  box-sizing: border-box;
  padding:20rpx;
  min-height:calc(100vh - 100rpx);
  margin:30rpx;
  box-shadow: 0 0 10px gray;
  border-radius: 10rpx;
  float:left;
  position:absolute;
  top:20rpx;
  transition:all 0.3s;
  background:white;
  z-index:1;
}
.cont .title{
  font-size: 40rpx;
  font-weight: bold;
  padding:10rpx 0;
}
.cont .xz{
  width:100%;
  box-sizing: border-box;
}
.cont .xz .da{
  padding:30rpx 0;
  border-bottom:1px solid gray;
}
.cont .xz .da .left{
  box-sizing: border-box;
  padding-left:20rpx;
  width:calc(100% - 30px);
  float:left;
}
.cont .xz .da .right{
  width:30px;
  height:21px;
  float:right;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cont .xz .da .right view{
  width:30rpx;
  height:30rpx;
  border:6rpx solid gray;
  border-radius: 100%;
}
.cont .xz .da .xz view{
  border:6rpx solid rgb(70, 148, 24);
  background:rgb(0, 255, 153);
  /* border:6rpx solid rgb(0, 255, 153);
  color:rgb(70, 148, 24);
  font-weight:bold;
  line-height:30rpx;
  font-size:60rpx; */
}
.cont .xz .da image{
  margin:20rpx 10rpx 0rpx 10rpx;
  width:calc(50% - 20rpx);
}
.footer{
  position: fixed;
  bottom:0rpx;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  background:white;
  /* box-shadow: 0 0 5px black; */
}
.footer button{
  width:100%;
  text-align:center;
  line-height: 100rpx;
  height:100rpx;
  letter-spacing:4rpx;
  background:rgb(209, 206, 206);
  color:white;
  border:0rpx;
}
.footer button::after {
  border: 0;
}
.footer button.kx{
  background:#00B26A;
}
.zh button{
  width:50%;
}
.zh button:first-child{
  border-radius: 10rpx 0rpx 0rpx 10rpx;
  float:left;
}
.zh button:last-child{
  border-radius: 0rpx 10rpx 10rpx 0rpx;
  border-left:1rpx solid rgb(209, 206, 206);
  float:left;
}
.qp{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  z-index:3;
}

wxjs

// pages/cs/cs.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    wtlist: [
      { title: "你喜欢的生活环境", da: [
        { nr: "繁华都市" , gj: ['美国',"中国","香港","日本"]}, 
        { nr: "优雅小镇" , gj: ['德国', '英国', '马耳他', '希腊', '法国', '西班牙', '葡萄牙']},
        { nr: "阳光海岛" , gj: ['安提瓜和巴布达', '圣基茨', '多米尼加', '多米尼克', '圣卢西亚','澳大利亚']},
        { nr: "深山老林" , gj: ['加拿大', '美国', '中国' ,'新西兰']}
      ], left: 0},
      { title: "你喜欢的饮品", da: [
        { nr: "红酒", gj: ['法国', "中国", "香港", "日本"] },
        { nr: "啤酒", gj: ['德国', '英国', '马耳他', '希腊', '法国', '西班牙', '葡萄牙'] },
        { nr: "烈酒", gj: ['安提瓜和巴布达', '圣基茨', '多米尼加', '多米尼克', '圣卢西亚', '澳大利亚'] },
        { nr: "果汁饮品", gj: [ '美国', '中国', '新西兰'] }
      ], left: 1 },
      { title: "你最喜欢的蔬菜", da: [
        { nr: "胡萝卜", gj: ['法国', "中国", "香港", "日本"] },
        { nr: "土豆", gj: ['德国', '英国', '马耳他', '希腊', '法国', '西班牙', '葡萄牙'] },
        { nr: "白菜", gj: ['安提瓜和巴布达', '圣基茨', '多米尼加', '多米尼克', '圣卢西亚', '澳大利亚'] },
        { nr: "西红柿", gj: ['加拿大', '美国', '中国'] }
      ], left: 1 },
      { title: "你最理想的身高", da: [
        { nr: "160以下", gj: ['法国', "中国", "香港", "日本"] },
        { nr: "160-170", gj: ['德国', '英国', '马耳他', '希腊', '法国', '西班牙', '葡萄牙'] },
        { nr: "170-180", gj: ['安提瓜和巴布达', '圣基茨', '多米尼加', '多米尼克', '圣卢西亚', '澳大利亚'] },
        { nr: "180以上", gj: ['加拿大', '美国', '中国'] }
      ], left: 1 }
    ],
    now:0,
    status:false,
    qp:false,
    data:[]
  },
  gb(e){
    if (this.data.now > this.data.wtlist.length - 1 || (e == 1 && this.data.now >= this.data.wtlist.length - 1)){
      return;
    }
    var that = this;
    this.setData({ qp: true })
    if (e != 1) { //上一个问题
      this.setData({
        ['wtlist[' + this.data.now + '].left']: 1,
        ['wtlist[' + (this.data.now - 1) + '].left']: 0,
        'now': this.data.now - 1
      });
      this.setData({
        'status': false
      });
      for (var i = this.data.now + 1; i < this.data.wtlist.length; i++) {
        for (var j in this.data.wtlist[i].da) {
          this.setData({
            ['wtlist[' + i + '].da[' + j + '].is']: false
          });
        }
      }
      this.setData({
        'data': that.data.data.slice(0, that.data.now+1)
      });
      
    }else { //下一个问题
      this.setData({
        ['wtlist[' + this.data.now + '].left']: -1,
        ['wtlist[' + (this.data.now + 1) + '].left']: 0,
        'now': this.data.now + 1
      });
    }
    
    setTimeout(function () {
      that.setData({ qp: false })
    }, 300);
  },
  tj(){
    this.setData({'qp':true});
    wx.showLoading({title: '正在分析'});
    var hj = {};
    for( var i in this.data.data){
      for (var j in this.data.wtlist[i].da[this.data.data[i].index].gj){
        if (hj[this.data.wtlist[i].da[this.data.data[i].index].gj[j]]){
          hj[this.data.wtlist[i].da[this.data.data[i].index].gj[j]]++;
        }else{
          hj[this.data.wtlist[i].da[this.data.data[i].index].gj[j]] = 1;
        }
      }
    }
    var max = 0;
    var arr = [];
    for(var i in hj){
      if(hj[i] > max){
        max = hj[i];
        arr = [i];
      } else if (hj[i] == max){
        arr.push(i);
      }
    }
    wx.hideLoading();
    wx.showToast({
      title: '你上辈子是' + arr[Math.floor(Math.random() * arr.length)]+"人",
      icon: 'none'
    });
    this.setData({ 'qp': false });
  },
  dj(e){
      var index = e.currentTarget.dataset.index;
      var key = e.currentTarget.dataset.key;
      var nr = this.data.wtlist[index].da[key].nr;
      for(var i in this.data.wtlist[index].da){
        this.setData({
          ['wtlist[' + index + '].da[' + i + '].is']: false
        });
      }
      this.setData({
        ['wtlist[' + index + '].da[' + key + '].is']:true
      });
      this.setData({
        ['data[' + index + ']']: {index:key,nr:nr}
      });
      this.gb(1);
      if(this.data.data.length == this.data.wtlist.length){
        this.setData({
          'status': true
        });
      }
  }
})