【练习】 事件绑定和处理

题目要求:

题目要求

知识点:

使用 target.dataset.value调用事件值。
使用this.setData给data中result属性赋值,输出到视图层。

代码实现:

先通过wxml把页面结构写出来,然后在视图层绑定事件getGameResult,在逻辑层设定getGameResult事件。
接着使用if语句比较用户点击的结果(判断用户点击的结果需要使用自定义属性把按钮对应的类型传给事件处理函数,从而用于确定用户点击的按钮是剪刀,石头还是布。)和电脑随机产生的结果,得出胜负关系。

wxml 文件,编写内容如下:

<!--index.wxml-->
<view class="game">
 <view class="game-inner">
   <view class="game-hd">
     <text class="title">来,玩个小游戏!</text>
   </view>
   <view class="game-bd" bindtap='getGameResult'>
     <!-- 为按钮绑定事件 -->
     <button class="btn" data-value ='{{"0"}}'>剪刀</button>
     <button class="btn" data-value ='{{"1"}}'>石头</button>
     <button class="btn" data-value ='{{"2"}}'>布</button>
   </view>
   <view class="game-ft">
     <text class="result">{{ result }}</text>
   </view>
 </view>
</view>

js 文件,编写内容如下:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    result: '请选择一个按钮',
  },
  getGameResult: function (event) {
    //实现函数
    // console.log(event.target.dataset.value)
    // console.log(parseInt(Math.random() * 3))
    var gameresult;
    var userchoice = parseInt(event.target.dataset.value);
    var comchoice = parseInt(Math.random() * 3);
    if (userchoice == comchoice) {
      gameresult = '平局';
    }else if ((userchoice == 0 && comchoice == 1) || (userchoice == 1 && comchoice == 2) || (userchoice == 2 && comchoice == 0)) {
      gameresult = '输了';
    }else {
      gameresult = '赢了';
    }
    this.setData({
      result : gameresult
    })
    // console.log(gameresult)
  }
})

上面的 getGameResult 就是在 WXML 上面绑定的事件所对应的处理函数,我们需要通过事件对象获取到按钮数据,并使用 parseInt(Math.random() * 3) 随机生成 0, 1, 2 三个数字的其中一个,分别代表电脑出的猜拳,再跟用户的选择对比,确定最终结果并用 result 输出到页面中。

可以通过编写wxss 文件来定义样式:

/**index.wxss**/
page {
  height:100%;
}
.game {
  display:flex;
  height:100%;
}
.game-inner {
  flex:1;
  align-self:center;
}
.game-hd {
  padding:48rpx 0;
}
.game-hd .title {
  display:block;
  text-align:center;
  font-weight:bold;
  font-size:64rpx;
}
.game-bd {}
.game-bd .btn {
  margin-bottom:24rpx;
}
.game-ft {}
.game-ft .result {
  display:block;
  text-align:center;
  font-size:32rpx;
  color:red;
}

最终期望页面输出为:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,591评论 8 265
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 转载请注明出处, 谢谢! (~ o ~)Y 1月9日,也就是今天,微信推出的“小程序”正式上线。“小程序”是一种无...
    Jimmy_P阅读 14,447评论 52 273
  • 和去年一样,早早起来抱着一本书一个电脑来Starbucks 。因为貌似只它早早地开门,坡岛大部分商店初一都关门了。...
    吴小七阅读 447评论 0 7
  • 今天我们来到了上海的环球港,那是一个很大的商场,在这里我们开始了一次疯狂的玩乐。 爸爸妈妈们去逛...
    宁莉阅读 277评论 0 0