更新记录
1.0.1(2024-10-29) 下载此版本
适配其他版本
1.0.0(2024-10-29) 下载此版本
基于vue2实现用户购买提示气泡,案例为静态展示,可根据自己项目需求获取数据展示
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
purchaser
介绍
基于vue2实现用户购买提示气泡,案例为静态展示,可根据自己项目需求获取数据展示
使用
<template>
<view class="content">
<div class="pay">
<!-- 购买人气泡 -->
<wq-purchaser :avatarArr="avatarArr"/>
<div class="pay-btn">立即购买</div>
</div>
</view>
</template>
<script>
export default {
data() {
return {
// 头像数据
avatarArr: ['/static/0.jpeg', '/static/1.jpeg', '/static/2.jpeg', '/static/3.jpeg', '/static/4.jpeg', '/static/5.jpeg', '/static/6.jpeg']
}
}
}
</script>
<style>
.pay {
position: fixed;
}
</style>
备注
组件中使用的是position: absolute;
,在父组件中需要设置position: relative;
或者position: fixed;
,否则组件位置会偏移。