微信小程序 - 监听page中的data

app.js

  observe(obj, key, fun, caller){
    var val = obj[key];
    Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      set(value) {
        console.log('set ',key)
        val = value;
        fun.call(caller, value, val)
      },
      get() {
        return val;
      }
    })
  },

 // 监听特定data对象的属性变化
 // caller :保留this指针
  watch(data, watch, caller){
    Object.keys(watch).forEach(v => {
      this.observe(data, v, watch[v], caller);
    })

  }

使用的方法很简单:
在相应的页面获取app实例,然后在onLoad中:

 app.watch(this.data, this.watch, this);

再在pageoptions中添加字段:

  watch: {
    keyword(val, old) {
      if (val !== '') {
        console.log('watching')
        throttle(this.onInputSearch, null, [val])
      }
    }
  },

ps: 这样会引起渲染上的bug,原因分析及解决办法具体看下一篇博客。
VM424:5 Error: Expect END descriptor with depth 1 but get another

微信小程序的大转盘游戏通常是一个交互式的抽奖组件,玩家通过转动虚拟的轮盘,当指针停止时落在哪个区域就可以赢得奖品。关于大转盘源码的具体实现,由于涉及到微信官方的小程序API和前端技术,这里提供一个简化的步骤: 1. 创建项目:首先,你需要在微信公众平台上创建一个新的小程序项目,并安装微信开发者工具。 2. UI设计:使用WXML和WXSS编写界面布局,包括转盘、指针、按钮等元素。可以利用`view`、`image`标签和一些自定义组件库(如`wxcircularindicator`)来制作转盘效果。 3. 动画处理:通过JavaScript编写事件监听,模拟转盘转动动画。这通常涉及定时器和位置更新操作,当指针到达特定点时触发抽奖逻辑。 4. 抽奖逻辑:设置奖品数组和随机选择功能,在用户点击抽奖按钮后,根据算法从奖品数组随机选取一项作为奖品。 5. 数据绑定:将结果与UI绑定,显示获奖信息给用户。 下面是一段简单的示例代码片段(简化版): ```javascript Page({ data: { prizes: ['一等奖', '二等奖', '三等奖'], currentRotation: 0, }, wheelTurn: function() { this.setData({ currentRotation: (this.data.currentRotation + Math.random() * 360) % 360 }); if (Math.random() * 360 < 30) { // 设置概率较低停在某个区域 let prize = this.data.prizes[this.data.currentRotation / 360 * this.data.prizes.length]; this.showPrize(prize); } }, showPrize: function(prize) { console.log('恭喜您获得:', prize); // 在实际项目,你可以替换这里的console.log,展示到界面上 }, onTap: function() { this.wheelTurn(); }, }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值