更新记录

1.0（2019-12-26） 下载此版本

-

平台兼容性

hx-jump-ball 用于加入购物车的跳跃效果

特效组件

本组件目前兼容H5、5+APP。

使用案例：

使用案例：HX商城。模版地址：https://ext.dcloud.net.cn/plugin?id=1352

本组件支持模式：

1. 主要应用在购物车添加商品时的动态效果

使用前提

注意HBuilder X 2.4.7版本以下 H5 是没有效果的，app有；所以赶紧升级编辑器！！！

使用方式

页面使用需在 script 中引用组件

import hxJumpBall from "@/components/hx-jump-ball/hx-jump-ball.vue"
export default {
    components: {hxJumpBall}
}

属性

基本属性

事件

使用例子

html

<template>
    <view>
        <jumpBall :start.sync="num" :element.sync="element" @msg="jbMsg" />

        <view class="add" @click="anima()" ><button>起跳1</button></view>
        <view class="add2" @click="anima2()"><button>起跳2</button></view>  
        <view class="foot"><view class="cart">测试位置</view></view>
    </view>
</template>

javacript

<script>
    import jumpBall from '@/components/hx-jump-ball/hx-jump-ball.vue';
    export default {
        components: {
          jumpBall
        },
        data() {
            return {
                num:1,
                element: [],
            }
        },
        methods: {
            anima(){
                this.element = ['.add','.cart'];
                this.num ++; 
            },
            anima2(){
                this.element = ['.add2','.cart'];
                this.num ++;
            }, 
            jbMsg(res){
                //执行加入购物车的逻辑
                console.log("执行回调",res.code);
            }
        }
    }
</script>

css

<style>
    .add{
        position: fixed;
        right:30px;
        top: 150px;
    }
    .add2{
        position: fixed;
        right:30px;
        top: 250px;
    }
    .foot{
        position: fixed;
        bottom: 0;
        height: 90upx;
        background: #e1e1e1;
        width: 100%;
    }
    .foot .cart{
        width: 180upx;
        margin-left: 60upx;
        height: 90upx;
        background: #999999;
        line-height: 90upx;
        text-align: center;
    }
</style>