微信小程序仿胖东来轮播和背景效果(有效果图)
效果图

.wxml
<view class="swiper-index" style="--width--:{{windowWidth}}px;"><image src="{{swiperList[(cardCur + bgIndex == -1?swiperList.length - 1:cardCur + bgIndex > swiperList.length -1?0:cardCur + bgIndex)]}}" class="swiper-bg" style="--filter--:blur({{(1 - radio) * 12}}px);"></image><swiper class="card-swiper square-dot" indicator-dots="true" circular="{{true}}" autoplay="{{true}}" style="--scale--:{{radio}};"interval="{{5000}}" duration="500" indicator-color="#ffffff" indicator-active-color="#F2F2F2"bindtransition="cardSition" bindanimationfinish="cardFinish"data-windowWidth="{{windowWidth}}" data-bgindex="{{bgIndex}}"><swiper-item wx:for="{{swiperList}}" wx:key="index" class="{{cardCur==index?'cur':''}}"><view class="swiper-item"><image class="swiper-image" src="{{item}}"></image></view></swiper-item></swiper>
</view>
<view style="background: #fff;height: 10px;"></view>
.js
Page({data: {swiperList: ['https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'],cardCur:0,windowWidth:wx.getSystemInfoSync().windowWidth,radio:1,bgIndex:'',},cardFinish(e){this.setData({radio:1,bgIndex:0,cardCur: e.detail.current,})},cardSition(e){let dx = Math.abs(e.detail.dx),windowWidth = e.currentTarget.dataset.windowwidth,bgindex = e.currentTarget.dataset.bgindex;let num = dx / windowWidthlet radio = 1 - num < 0.9?0.9:1 - num;let index = num > 0.45?(e.detail.dx < 0?-1:1):0this.setData({radio,})if(index != bgindex){this.setData({bgIndex:index,})}},
})
.wxss
view,scroll-view,swiper,image {box-sizing: border-box;}
.swiper-index{padding: 10px;height: 260px;padding-top:100px;position: relative;}
.swiper-index::after{content: '';width: 120%;position: absolute;left: -10%;bottom: -30px;height: 30px;box-shadow: 0 -15px 15px 0px rgba(255,255,255,0.6);}
.swiper-bg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;filter: var(--filter--);z-index: -1;
transition: all 0.3s;}
.card-swiper {height: 130px !important;width: 100%;}
.card-swiper swiper-item {overflow: hidden;border-radius: 20rpx;}
.swiper-image{width:var(--width--);height: 260px;position: absolute;left: -10px;top: -100px;}
.card-swiper swiper-item .swiper-item {width: 100%;display: block;height: 100%;
transition: all 0.2s ease-in 0s;overflow: hidden;}
.card-swiper swiper-item.cur .swiper-item {transform: none;transform: scale(var(--scale--));
transition: all 0.1s ease-in 0s;border-radius: 20rpx;}
swiper.square-dot .wx-swiper-dot {background-color: #fff;opacity: 0.4;width: 10rpx;
height: 10rpx;border-radius: 20rpx;margin: 0 8rpx !important;}
swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {opacity: 1;width: 30rpx;}
遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。
相关文章:
微信小程序仿胖东来轮播和背景效果(有效果图)
效果图 .wxml <view class"swiper-index" style"--width--:{{windowWidth}}px;"><image src"{{swiperList[(cardCur bgIndex -1?swiperList.length - 1:cardCur bgIndex > swiperList.length -1?0:cardCur bgIndex)]}}" clas…...
10.SpringBoot 统一处理功能
文章目录 1.拦截器1.1在代码中的应用1.1.1定义拦截器1.1.2注册配置拦截器 1.2拦截器的作用1.3拦截器的实现 2.统一数据返回格式2.1 为什么需要统⼀数据返回格式?2.2 统⼀数据返回格式的实现 3.统一异常处理4.SpringBoot专业版创建项目无Java8版本怎么办?…...
【八股系列】为什么会有webpack配置?webpack的构建流程是什么?
文章目录 1. webpack是什么?2. 为什么需要webpack?3. webpack构建原理4. 构建流程通常包括以下步骤5. Webpack构建流程图 1. webpack是什么? Webpack是一个模块打包工具,它可以将项目中的各种静态资源,如JavaScript、…...
sdf 测试-2-openssl
任务详情 在openEuler(推荐)或Ubuntu或Windows(不推荐)中完成下面任务,参考网内容 和AI要给出详细过程,否则不得分。 0. 根据gmt0018标准,如何调用接口实现基于SM3求你的学号姓名的SM3值?(5‘) 使用OpenSSL实现SDF接…...
头歌springboot初体验
您好!看起来您可能在询问关于Spring Boot的入门体验。Spring Boot是一个开源的Java框架,它设计用来简化Spring应用程序的初始搭建和开发过程。以下是一些Spring Boot的基本概念和入门步骤: Spring Boot简介: Spring Boot是Spring框…...
矩阵对角化在机器学习中的奥秘与应用
在机器学习的广阔领域中,矩阵对角化作为一种重要的数学工具,扮演着不可或缺的角色。从基础的线性代数理论到复杂的机器学习算法,矩阵对角化都在其中发挥着重要的作用。 矩阵对角化的概念与原理 矩阵对角化是矩阵理论中的一个基本概念&#x…...
操作MySQL数据库
【一】针对库的增删查改(文件夹) 【1】创建数据库 (1)语法 创建一个存储数据表的文件夹。 注意:mysql中的编码字符集中utf-8,要换成utf8mb4。SQL语句中的中括号部分表示可选。 create database [if no…...
Linux shell 文件生成文件脚本(模拟生成文件、生成大量文件)
文章目录 Linux shell 文件生成文件脚本 Linux shell 文件生成文件脚本 TARGET_DIR:生成文件路径 NUM_FILES:生成文件数量 FILE_SIZE:生成文件大小(KB) #!/bin/bashset -e set -u# Directory where files will be cr…...
theharvester一键收集域名信息(KALI工具系列十)
目录 1、KALI LINUX简介 2、theharvester工具简介 3、在KALI中使用theharvester 3.1 用搜索引擎扫描 3.2 扫描并输出结果 3.3 扫描某域名下的所有账号 3.4 使用所有的搜索引擎扫描 4、总结 1、KALI LINUX简介 Kali Linux 是一个功能强大、多才多艺的 Linux 发行版&…...
「动态规划」删除并获得点数
力扣原题链接,点击跳转。 给你一个整数数组nums。每次操作,可以删除任意一个值n,接着获得点数n,并同时删除所有的n-1和n1。你最多能获取多少点数? 这个问题的解法相当巧妙。我们可以把问题先转化一下。用类似计数排序…...
MongoDB CRUD操作:内嵌文档数组查询
MongoDB 内嵌文档数组查询 文章目录 MongoDB 内嵌文档数组查询查询数组内嵌文档为文档数组中的字段指定查询条件指定文档数组内嵌文档字段的查询条件使用数组索引查询内嵌文档的字段 为文档数组指定多个条件单个内嵌文档满足内嵌字段的多个查询条件符合标准的元素组合 使用 Mon…...
【C++】每日一题 50 Pow(x,n)
实现 pow(x, n) ,即计算 x 的整数 n 次幂函数(即,x^n )。 当需要计算x的n次幂时,可以使用递归或者迭代的方式来实现。 #include <iostream>double myPow(double x, int n) {if (n 0) {return 1.0;} else if (…...
HG/T 6088-2022 透水道路用涂料检测
透水混凝土是指由水泥、矿物掺合料、骨料、外加剂及水等主要材料经拌合形成的,具有透水功能的混凝土材料,用于其表面的涂料称为透水道路用涂料。 HG/T 6088-2022透水道路用涂料检测项目: 测试指标 测试方法 有害物质限量 GB 38468 在容器…...
linux定时清理docker日志脚本
Linux 定时清理 Docker 日志的脚本与配置指南 在使用 Docker 容器化应用程序时,日志文件可能会迅速增长,占用大量磁盘空间。为了保持系统的稳定性和高效运行,定期清理 Docker 日志文件是必要的。本文将介绍如何编写一个 Linux 脚本来清理 Docker 日志文件,并通过 cron 定时…...
ROS学习笔记(16):夹缝循迹
0.前言 在笔记的第15期对巡墙驾驶的原理进行了简单讲解,而这期我们来讲一下夹缝循迹,也常被叫follow the gap,也更新一些概念。 1.探索式路径规划与避障 1.概念 无预先建图的路径规划叫探索式路径规划,例如巡墙循迹和夹缝循迹&…...
【MySQL精通之路】SQL语句(3)-锁和事务语句
目录 1.START TRANSACTION、COMMIT和ROLLBACK语句 2.无法回滚的语句 3.导致隐含COMMIT的语句 4.SAVEPOINT、ROLLBACK TO SAVEPOINT和RELEASE SAVEPOINT语句 5.LOCK INSTANCE FOR BACKUP和UNLOCK INSTANCE语句 6.LOCK TABLE和UNLOCK TABLES语句 6.1 表锁获取 6.2 表锁释放…...
211大学计算机专业不考408,新增的交叉专业却考408!南京农业大学计算机考研考情分析!
南京农业大学信息科技学院可追溯至1981年成立的计算中心和1985年筹建的农业图书情报专业。1987年设立了农业图书情报系,1993 年农业图书情报系更名为信息管理系,本科专业名称也于1999年更名为信息管理与信息系统专业。1994年计算中心开始招收计算机应用专…...
利用java8 的 CompletableFuture 优化 Flink 程序,性能提升 50%
你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…...
香橙派 AIpro综合体验及AI样例运行
香橙派 AIpro综合体验及AI样例运行 环境: 香橙派版本: AIpro(8TOPSINT8) OS : Ubuntu 22.04.3 LTS(GNU/Linux 5.10.0 aarch64) (2024-03-18) 远程服务端1:OpenSSH 8.9p1 远程服务端2:TightVNC Server 1.3.10 远程客户端…...
通过域名接口申请免费的ssl多域名证书
来此加密已顺利接入阿里云的域名接口,用户只需一键调用,便可轻松完成域名验证,从而更高效地申请证书。接下来,让我们详细解读一下整个操作过程。 来此加密官网 免费申请SSL证书 免费SSL多域名证书,泛域名证书。 首先&a…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10pip3.10) 一:前言二:安装编译依赖二:安装Python3.10三:安装PIP3.10四:安装Paddlepaddle基础框架4.1…...
uni-app学习笔记三十五--扩展组件的安装和使用
由于内置组件不能满足日常开发需要,uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件,需要安装才能使用。 一、安装扩展插件 安装方法: 1.访问uniapp官方文档组件部分:组件使用的入门教程 | uni-app官网 点击左侧…...
Java后端检查空条件查询
通过抛出运行异常:throw new RuntimeException("请输入查询条件!");BranchWarehouseServiceImpl.java // 查询试剂交易(入库/出库)记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...
DeepSeek越强,Kimi越慌?
被DeepSeek吊打的Kimi,还有多少人在用? 去年,月之暗面创始人杨植麟别提有多风光了。90后清华学霸,国产大模型六小虎之一,手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水,单月光是投流就花费2个亿。 疯…...
