更新记录
1.2(2022-12-12) 下载此版本
维护不跟手的bug
1.13(2022-11-23) 下载此版本
修整部分代码质量,更精准获取页面位置 2022/11/23
1.12(2022-11-19) 下载此版本
修改部分问题,减轻体积 2022/11/19
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
1.使用方法: import cartFlyBall from '@/components/Cart-FlyBall.vue' 引入需要的组件
components: {
cartFlyBall 且注册组件
},
<cartFlyBall ref="cartFlyBall" :antishake="500" :color="color" :pic="getpic" :endEvent="endEvent"></cartFlyBall>
虽然在h5页面可以使用,但是只能使用而已,并不流畅,建议使用js
须在app端测试
在点击方法处使用,并在点击方法名称后传参 如(@click="btn($event)")
this.$refs.Cartdemo.createstart(event) //此方法获取球球初始地址
如有图片的情况需要(@click="btn($event,图片来源、路径))
this.getpic = 图片来源、路径 (承上启下,看上方使用方法this.getpic是怎么来的)
this.$refs.Cartdemo.createstart(event) //此方法获取球球初始地址
需要使用uniapp的查询节点信息进行获取最最终的地址(新方法在修改中)此方法对于使用uniapp开发用户比较便捷
官方文档:[](https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery)
mounted() { 创建在mounted里面
uni.createSelectorQuery().select(".cartImgBox"). 括号内为css类名
boundingClientRect((res) => {
const style = {};
style.left = res.left + res.width / 2 + "px";
style.top = res.top + "px";
this.endEvent = style //获取球球走向
}).exec()
},
2.传参格式
属性名: 类型: 默认值: 是否必填: 说明:
endEvent Object {x,y} true 获取球球最终地址
antishake Number 默认400ms false 防抖时间
color String #00aa00(绿色) false 球球自定义颜色
pic String 无,需定义 false 球球变成自定义图片