前端Vue自定义滚动卡片,可以用于商品海报生成

news2024/10/3 10:35:35

前端Vue自定义滚动卡片,可以用于商品海报生成, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13189

 

7c1ffe562b634c84a7f488ee6dd55245.png

 

实现代码如下:

# cc-scroolCard

#### 使用方法

```使用方法

<!-- dataInfo:滚动卡片数据  swiperIndex:滚动序列 @change:滚动事件-->

<cc-scroolCard :dataInfo="data" :swiperIndex="swiperIndex" @change="swiperChangeClick"></cc-scroolCard>

```

#### HTML代码实现部分

```html

<template>

<view class="content">

<!-- dataInfo:滚动卡片数据  swiperIndex:滚动序列 @change:滚动事件-->

<cc-scroolCard :dataInfo="data" :swiperIndex="swiperIndex" @change="swiperChangeClick"></cc-scroolCard>

</view>

</template>

<script>

export default {

data() {

return {

swiperIndex: 0,

data: {

"priceShop": "¥699.0",

"headImgs": ["http://qn.kemean.cn/file/upload/202005/21/1590043402088i2jxb79n.jpg?imageView2/0/w/800",

"http://qn.kemean.cn/file/upload/202005/21/1590043404759qml3zmlm.jpg?imageView2/0/w/800",

"http://qn.kemean.cn/file/upload/202005/21/1590043407501c6o63bmi.jpg?imageView2/0/w/800",

"http://qn.kemean.cn/file/upload/202005/21/1590043410966jwbtkyw1.jpg?imageView2/0/w/800",

"http://qn.kemean.cn/file/upload/202005/21/1590043413622bnysmgy9.jpg?imageView2/0/w/800"

],

"goodsName": "巴黎香奈儿沙龙香水50ml",

"goodsPrice": "¥999.0",

"recommendCodeGoods": "https://www.we123.com/d/file/xcx/2017-08-07/deceda498e19d82d71449f46828e864b.jpg",

},

}

},

methods: {

swiperChangeClick(e) {

this.swiperIndex = e.detail.current

console.log("swiperIndex = " + this.swiperIndex);

}

}

}

</script>

<style>

page{

background: #f1f1f1;

}

.content {

display: flex;

padding-top: 29px;

}

</style>

```

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/686125.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

(1)ADS-B接收机

文章目录 前言 1.1 所需硬件 1.2 连接到自动驾驶仪 1.3 设置 1.4 ADSB输出配置 1.5 启用载人飞行器避障功能 1.6 飞行器数据库 1.7 开发者信息包括模拟 前言 本文介绍了如何安装和配置 ADS-B 模块&#xff0c;以便你的飞机能够知道附近的其他飞机和空中交通管制&#…

高性能消息中间件 RabbitMQ

一、RabbitMQ概念 1.1 MQ是什么 消息队列 MQ全称Message Queue&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。多用于系统之间的异步通信。 同步通信相当于两个人当面对话&#xff0c;你一言我一语。必须及时回复&#xff1a; 异步通信相…

用API Key保护Spring Boot 接口的安全

1、概述 安全性在REST API开发中扮演着重要的角色。一个不安全的REST API可以直接访问到后台系统中的敏感数据。因此&#xff0c;企业组织需要关注API安全性。 Spring Security 提供了各种机制来保护我们的 REST API。其中之一是 API 密钥。API 密钥是客户端在调用 API 调用时提…

DAY 79 云原生DOCKER的基本原理及镜像管理

Docker概述 云计算涌现出很多改变传统IT架构和运维方式的新技术&#xff0c;比如虚拟机、容器、微服务、Serverless&#xff08;无服务&#xff09;&#xff0c;无论这些技术应用在哪些场景&#xff0c;降低成本、提升效率是云服务永恒的主题。 1.运行物理机&#xff0c;也称…

【历史上的今天】6 月 26 日:EDSAC 计算机之父诞生;B 站成立;Skype 创始人出生

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 6 月 26 日&#xff0c;在 1911 年的今天&#xff0c;计算机先驱弗雷德里克威廉姆斯&#xff08;Frederic Williams&#xff09;出生。威廉姆斯是一位英国工程…

1: BDF(Bus,Device,Function)

目录 1.概述 2.BUS&#xff1a;总线号 3.Device&#xff1a;设备号 4.Function&#xff1a;功能号 1.概述 PCIe总线中的每一个功能都有一个唯一的标识符与之对应。这个标识符就是BDF&#xff08;Bus&#xff0c;Device&#xff0c;Function&#xff09; 2.BUS&#xff1a;总…

如何在 Spring Boot 中使用 WebMvc

如何在 Spring Boot 中使用 WebMvc 引言 Spring Boot 是一个快速、简单的开发框架&#xff0c;可以帮助我们快速地搭建一个基于 Spring 的 Web 应用程序。在 Spring Boot 中&#xff0c;我们可以使用 WebMvc 来构建 Web 应用程序。WebMvc 是 Spring 框架中的一个模块&#xf…

【案例实战】SpringBoot整合Redisson实现RedLock分布式锁同步

思考&#xff1a;生产环境下Redis集群环境&#xff0c;怎么保证锁的同步&#xff1f; 我们先来回顾一下分布式锁的作用&#xff1a;就是保证同一时间只有一个客户端可以对共享资源进行操作。 当我们集群环境部署的时候&#xff0c;假如节点一在主节点获取分布式锁成功。Redis…

【微服务架构模式】构建应用程序的顶级微服务设计模式

在当今市场上&#xff0c;微服务已成为构建应用程序的首选解决方案。众所周知&#xff0c;它们可以解决各种挑战&#xff0c;但是&#xff0c;熟练的专业人员在使用此架构时经常面临挑战。因此&#xff0c;相反&#xff0c;开发人员可以探索这些问题中的常见模式&#xff0c;并…

简单的Image Picker:使用Jetpack Compose无需权限申请

简单的Image Picker&#xff1a;使用Jetpack Compose无需权限申请 学习如何在Android应用中轻松选择、存储和加载本地图像&#xff0c;无需繁琐的权限处理。 作为一名Android开发者&#xff0c;我知道在应用中实现本地图像选择时处理权限可能会让人感到沮丧。这就是为什么我想…

Juc04_阻塞队列概述、方法、实现类、Linked和Array区别、注意事项

文章目录 ①. 什么是阻塞队列②. BlockingQueue的主要方法③. BlockingQueue的实现类④. Linked和Array区别⑤. 不推荐使用快捷的线程池 ①. 什么是阻塞队列 ①.阻塞队列:从名字可以看出,它也是队列的一种,那么它肯定是一个先进先出FIFO的数据结构。与普通队列不同的是,他支持两…

Flask新手教程

Flask简介 Flask是一个轻量级的可定制框架&#xff0c;使用Python语言编写&#xff0c;较其他同类型框架更为灵活、轻便、安全且容易上手。 Flask 可以很好地结合MVC模式进行开发&#xff0c;开发人员分工合作&#xff0c;小型团队在短时间内就可以完成功能丰富的中小型网站或…

正点原子uboot分析

知识点 为终端不输出command line&#xff1a;终端输入如果变量quiet为空的话&#xff0c;整个命令都会输出。 如果变量 quiet为“ quiet_”的话&#xff0c;仅输出短版本。 如果变量 quiet为“ silent_”的话&#xff0c;整个命令都不会输出。sinclude&#xff1a;读取的文件…

Java通过JNI调用dll动态库详细步骤

目录 目标具体示例1、编写java代码&#xff1a;定义native接口2、根据java编写的native接口生成.h头文件3、使用Visual Studio编写c代码实现头文件接口并生成dll文件4、将生成的jni.dll文件放入jdk bin下5、编写java测试类&#xff0c;调用dll 附&#xff1a;问题java测试类执行…

上门家教app小程序源码开发的前景如何?

随着我国生活水平的提高&#xff0c;教育方面的问题也越来越受到家长们的重视&#xff0c;很多家庭都开始通过家教以及辅导班等方式增强学生的学业知识&#xff0c;因此家教app开发是拥有很大一部分用户市场的。那么家教app开发主要适合什么行业呢&#xff1f; 上门家教服务或…

Zabbix-客户端部署全过程

本文已收录于专栏 《中间件合集》 目录 概念说明什么是Zabbix 功能介绍配置过程1.在linux下的admin文件夹下创建zabbix文件夹2.把agent端压缩包放置到home/admin/zabbix路径下3.解压安装包4.创建zabbix日志文件5.进入到conf文件夹下&#xff0c;修改配置文件&#xff0c;与serv…

Linux系统下网络性能监控指令(iftop、nload)

文章目录 iftop参数快捷键iftop界面说明&#xff1a; nload参数示例 iftop 参数 -i 设定监测的网卡&#xff0c;如&#xff1a;# iftop -i eth1 -B 以bytes为单位显示流量(默认是bits)&#xff0c;如&#xff1a;# iftop -B -n 使host信息默认直接都显示IP&#xff0c;如&…

今天给大家安利几款非常好用的文件迁移工具

文件迁移是我们平时经常需要处理的问题之一。在日常生活中&#xff0c;我们可能需要将一些文件从电脑上的一个位置迁移到另一个位置&#xff0c;或者将文件转移到外部硬盘或云端存储空间。而为了更加高效地完成这项任务&#xff0c;使用一款好用的文件迁移工具显得尤为重要。今…

基于smardaten无代码开发解决光伏电站项目

文章目录 前言一、事故背景二、解决方案三、工具加持四、配置要点解析1、光伏导航菜单搭建2、运行监控组件布局3、员工填报表单创建4、数据接入清洗5、复杂数据展示5、地图大屏组装6、定制页面集成 五、挖掘更多惊喜1、模拟数据生成2、智能分析结果3、草图智能识别4、日期排班设…

el-dialog设置滚动条不生效记录【草稿版,待优化】

目录 前言一、scrollTop是什么&#xff1f;二、解决步骤总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 技术栈 element-plus vue3 js 记录el-dialog的弹窗中&#xff0c;通过js控制滚动条不生效。 我这次的需求是这样的&#xff0c;点击某个按钮…