更新记录
1.1.1(2020-07-10)
超级便利使用简单的每日福利推荐弹出框
平台兼容性
HbuilderX/cli最低兼容版本 |
2.4.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
开始使用
创建uni-app项目使用ColorUI-UniApp模板
下载源码解压,复制根目录的 /components
文件夹到你的根目录
在想使用的页面引入
import welfare from '../../components/welfare.vue'
and
components: {
welfare
},
页面使用标签可以直接调用了
<welfare :list="tjliat" :status="status" :time='fltime' @skip="skip" ></welfare>
data实例中配置参数
tjliat: [{ //要展示的商品可以从后台接口获取赋值
goods_id: 1,
goods_img: "http://qdyoucai.com/images/202007/source_img/1_G_1594062558921.jpg",
goods_name: "新鲜柠檬",
shop_price: "5.00",
},
{
goods_id: "2",
goods_img: "http://qdyoucai.com/images/202007/source_img/2_G_1594063893652.jpg",
goods_name: "木瓜广西红心木瓜 冰糖水果牛奶木瓜 新鲜水果京东生鲜 带箱5斤",
shop_price: "16.90",
},
{
goods_id: "3",
goods_img: "http://qdyoucai.com/images/202007/source_img/3_G_1594141931009.png",
goods_name: "鸡蛋",
shop_price: "5.99",
},
{
goods_id: "4",
goods_img: "http://qdyoucai.com/images/202007/source_img/4_G_1594063281296.jpg",
goods_name: "今锦上 麻辣小龙虾 净虾750g 中号25-33只 1.5kg 4-6钱 餐饮同款 海鲜火锅方便菜",
shop_price: "69.90"
}
],
status:'time',//day 每天弹出一次 time 指定时间后弹出(传入时间戳)
fltime: 5 //当status==time时,需要填写status,默认86400一天
methods中绑定点击商品获取商品id的方法
skip(id) {
console.log(id)
},
参数 |
作用 |
类型 |
默认值 |
tjliat |
展示商品的数组(需要传入4个) |
Array |
[] |
status |
弹出类型(day 每天弹出一次 time 指定时间后弹出(传入时间戳)) |
String |
day |
time |
当status==time时,需要填写status,默认86400一天 |
Number |
86400 |
方法 |
作用 |
@skip |
获取商品id的方法,方便跳转 |
-