微信小程序答题正确错误选择页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="unconsciousness">
  <text class="unconsciousness-title animated swing">患者有呼吸吗？</text>
  <image bindtap="tap" data-breathe="{{true}}" class="right" src="../../assets/images/right-large.svg" />
  <image bindtap="tap" data-breathe="{{true}}" class="right" src="../../assets/images/wrong-large.svg" />
  <button class="btn animated fadeInUp">不会判断？</button>
</view>

二、wxss样式文件代码如下：

@import "../../libs/animate.wxss"
.unconsciousness {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #23454D;
}

.unconsciousness-title {
  font-size: 60rpx;
  font-weight: bold;
  line-height: 20vh;
}

.right {
  height: 40vw;
  width: 40vw;
}
.btn {
  width: 600rpx;
  height: 100rpx;
  font-size: 40rpx;
  margin: 5vh 0;
  color: #23454D;
  background-color: #fff;
  border: 1px solid #B2BEC1;
  border-radius: 100rpx;
}

三、js页面代码如下：

Page({
  tap: function(e) {
    console.log(e);
    if (e.target.dataset.breathe === true) {
      wx.navigateTo({
        url: '../breathe/breathe'
      });
    }
  },
});

模板简介：该模板名称为【微信小程序答题正确错误选择页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。