使用 index.wxml  index.json

<water-ripple-container>
    <view>
         啦啦啦啦啦啦
    </view>
</water-ripple-container>


//json引入组件


{
    "component": true,
    "usingComponents": {
        "water-ripple-container": "/pages/_components/water-ripple-container/water-ripple-container"
    }
}

water-ripple-container.wxml

<view class="container" bindtouchstart="containerTap">
    <slot></slot>
    <view class="ripple" style="{{rippleStyle}}"></view>
</view>

water-ripple-container.wxss

.container {
  overflow: hidden;
  position: relative;
}
.ripple {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  height: 10px;
  width: 10px;
  position: absolute;
  transform: scale(0);
}
@keyframes ripple {
  100% {
    transform: scale(80);
    transform: scale(80);
    background-color: transparent;
  }
}

water-ripple-container.js

Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        rippleStyle: '',
        rippleTop: 0,
        rippleLeft: 0
    },

    /**
     * 组件的方法列表
     */
    methods: {
        containerTap(e) {
            let x = e.touches[0].pageX;
            this.getContainerRect(rect => {
                let min = 20;
                let max = 80;
                let randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
                let rippleTop = randomNumber;
                let rippleLeft = x - rect.left;
                let rippleStyle = `top: ${rippleTop}%; left: ${rippleLeft}px; animation: ripple 0.5s linear;`;
                this.setData({
                    rippleStyle,
                    rippleTop,
                    rippleLeft
                });
                setTimeout(() => {
                    this.setData({
                        rippleStyle: ''
                    });
                }, 500);
            });
        },

        getContainerRect(callback) {
            let query = this.createSelectorQuery();
            query.select('.container').boundingClientRect();
            query.exec(rects => {
                if (typeof callback === 'function') {
                    callback(rects[0]);
                }
            });
        }
    }
})

分享到：

打赏