更新记录
1.1.1(2020-07-10) 下载此版本
超级便利使用简单的每日福利推荐弹出框
平台兼容性
开始使用
创建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的方法,方便跳转 |
-