小程序实现选择题选择效果

本文实例为大家分享了小程序实现选择题的显示方法,供大家参考,具体内容如下

下面是三张效果图:初始图,选项正确图,选项错误图。

wxml代码:

<view class='selection'>
 <view class='{{view1}}' bindtap='view1Click' id='1'>a</view>
 <view class='{{view2}}' bindtap='view2Click' id='2'>b</view>
 <view class='{{view3}}' bindtap='view3Click' id='3'>c</view>
 <view class='{{view4}}' bindtap='view4Click' id='4'>d</view>
</view>

js代码:

Page({ 

 /**
  * 页面的初始数据
  */
 data: {
  view1: 'selection1',
  view2: 'selection1',
  view3: 'selection1',
  view4: 'selection1',
  // 默认答案为2,后台会给的
  key: 2,
  // 选项是否被点击
  isSelect: false
 }, 

 view1Click: function(e) {
  var select = e.target.id
  // 选项没被选择时将执行
  if (!this.data.isSelect) {
   // 将选项设置为“已被选择”
   this.setData({
    isSelect: true
   })
   // 注意!此处必须是'=='而不是'='
   if (select == this.data.key) {
    this.setData({
     view1: 'selection2'
    })
   } else {
    this.setData({
     view1: 'selection3'
    })
    // 将正确选项显示出来
    this.showAnswer(this.data.key)
   } 

  }
 },
 view2Click: function(e) {
  var select = e.target.id
  // 选项没被选择时将执行
  if (!this.data.isSelect) {
   this.setData({
    isSelect: true
   })
   // 注意!此处必须是'=='而不是'='
   if (select == this.data.key) {
    this.setData({
     view2: 'selection2'
    })
   } else {
    this.setData({
     view2: 'selection3'
    })
    // 将正确选项显示出来
    this.showAnswer(this.data.key)
   } 

  }
 },
 view3Click: function(e) {
  var select = e.target.id
  // 选项没被选择时将执行
  if (!this.data.isSelect) {
   this.setData({
    isSelect: true
   })
   // 注意!此处必须是'=='而不是'='
   if (select == this.data.key) {
    this.setData({
     view3: 'selection2'
    })
   } else {
    this.setData({
     view3: 'selection3'
    })
    // 将正确选项显示出来
    this.showAnswer(this.data.key)
   } 

  }
 },
 view4Click: function(e) {
  var select = e.target.id
  // 选项没被选择时将执行
  if (!this.data.isSelect) {
   this.setData({
    isSelect: true
   })
   // 注意!此处必须是'=='而不是'='
   if (select == this.data.key) {
    this.setData({
     view4: 'selection2'
    })
   } else {
    this.setData({
     view4: 'selection3'
    })
    // 将正确选项显示出来
    this.showAnswer(this.data.key)
   } 

  }
 },
 showAnswer: function(key) {
  // 通过swith语句判断正确答案,从而显示正确选项
  switch (key) {
   case 1:
    this.setData({
     view1: 'selection2'
    })
    break;
   case 2:
    this.setData({
     view2: 'selection2'
    })
    break;
   case 3:
    this.setData({
     view3: 'selection2'
    })
    break;
   default:
    this.setData({
     view4: 'selection2'
    })
  }
 }
})

wxss代码:

.selection1{
width: 400rpx;
height: 150rpx;
background-color: grey;

display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.selection2{
width: 400rpx;
height: 150rpx;
background-color: blue;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.selection3{
width: 400rpx;
height: 150rpx;
background-color: red;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.selection{
width: 750rpx;
height: 800rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现单选功能

    初次接触js弄了好长时间才出来效果,但是还是觉的不做梦完美,希望有更好的方式进行交流:实现效果如下: 虽说这个小功能但是对于我这个新手来说还是有点难:具体代码如下: WXML: <view class="backgrout-bj"> <view class="header"> 最多可增加4个功能入口 </view> <view> <block wx:for="{{model}}"> &l

  • 小程序实现单选多选功能

    小程序的单选组件radio和多选组件checkbox的样式只提供更改颜色,这对实际项目中的需求显然是不够的,所以自己模拟实现一个. 踩坑点:小程序不支持操作dom 1.模拟实现多选框: 实现思路:思路非常简单,给每个选项绑定checked属性,类型为布尔值,点击取反即可 <!--wxml--> <view class='wrap'> <view class='checkbox-con'> <checkbox-group bindchange="check

  • 微信小程序 radio单选框组件详解及实例代码

    微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成 属性名 类型 默认值 说明 bindchange EventHandle   radio-g

  • 微信小程序使用radio显示单选项功能【附源码下载】

    本文实例讲述了微信小程序使用radio显示单选项功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <radio-group bindchange="radiogroupBindchange"> <radio value="radio1">radio1</radio> <radio value="radio2">radio2</radio> &l

  • 小程序实现选择题选择效果

    本文实例为大家分享了小程序实现选择题的显示方法,供大家参考,具体内容如下 下面是三张效果图:初始图,选项正确图,选项错误图. wxml代码: <view class='selection'> <view class='{{view1}}' bindtap='view1Click' id='1'>a</view> <view class='{{view2}}' bindtap='view2Click' id='2'>b</view> <vie

  • 微信小程序实现购物车选择规格颜色效果

    本文实例为大家分享了微信小程序实现购物车选择规格颜色效果的具体代码,供大家参考,具体内容如下 wxml: <view>   <view>规格:</view>   <view class='dis'>     <block wx:for="{{guige}}">       <view class="{{gindex==index?'color':''}}" bindtap='guige' data-i

  • 微信小程序在地图选择地址并返回经纬度简单示例

    本文实例讲述了微信小程序在地图选择地址并返回经纬度功能.分享给大家供大家参考,具体如下: 微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息 wxml文件部分代码: <button bindtap="mapView" style="margin:10px">查看地图</button> js文件主要功能代码: mapView:function(){ var that = this wx.chooseLocation({ su

  • 微信小程序实现折叠展开效果

    本文实例为大家分享了微信小程序实现折叠展开效果的具体代码,供大家参考,具体内容如下 wxml: <view class="page"> <!-- 总数 --> <view class="li" bindtap='changeToggle'> <view class="left">总数</view> <view class="right gray" >8&l

  • 微信小程序实现图片选择并预览功能

    本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明 做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textarea使用,底部保存按钮固定 (二).小程序接口说明 wx.chooseLocation(Object object) 从本地相册选择图片或使用相机拍照. (三).效果图 效果如下: (四).代码展示 WXML页面: <view class="wrap"> <view cl

  • 原生小程序封装跑马灯效果

    本文实例为大家分享了小程序封装跑马灯效果的具体代码,供大家参考,具体内容如下 Marquee.wxml <view class="marquee_container " style="background:{{broadcast_arr.back_color}};font-size:32rpx;"> <view class='marquee_text' style='--marqueeWidth--:{{-broadcast_arr.width_m

  • 微信小程序-拍照或选择图片并上传文件

    微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose

  • 微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat

  • 微信小程序左滑删除效果的实现代码

    今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果 要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个

  • 微信小程序顶部可滚动导航效果

    需求是小程序做头部做导航分类的效果 顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type

随机推荐