Vue MPVue微信小程序 数字上下翻牌组件

一. 话不多说上图：

二. MPVue组件代码：

第一个（数字增加上翻，减小下翻）：

第二个（数字单页上翻）：

第三个（数字多页上翻 ）：

父组件中使用：

  data() {
    return {
      num: '102.23'
    }
  },
  mounted() {
    this.$nextTick(() => {
      setInterval(() => { // 模拟随机数字改变
        let num = parseInt(this.num) || '0'
        const random = Math.floor(Math.random() * 100)
        num += random
        this.num = num.toString() + '.' + random.toString()
      }, 3000)
    })
  },

三. 总结

1. 之前参考别人写的都是基于操作dom改变样式的。

2. 因为小程序中没有DOM和BOM对象，所以MPVue中不能使用dom操作节点,使用$refs操作原生html节点也是undefined，因此改变样式翻牌（translateY）都是通过数据双向绑定来实现的, 不过小程序中也可以使用createSelectorQuery来实现。

3. 写第二、三个组件是因为可能有需求--只能向上翻动 ( (σ｀д′)σ 产品过来时掏出一把刀也可以解决)

4. 如果想直接在vue项目中使用，应该修改一下style样式绑定方式和rpx单位就可以了。

5. 代码有问题或可以改进的地方欢迎各位大佬指正(‾◡◝)。