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

效果图

请添加图片描述

.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,很少看博客,对你有帮助别忘记点赞收藏。

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

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

相关文章

【四数之和】python,排序+双指针

四层循环&#xff1f;&#xff08;doge) 和【三数之和】题目很类似 class Solution:def fourSum(self, nums: List[int], target: int) -> List[List[int]]:nums.sort()#a,b,c,d四个数&#xff0c;先固定两个数&#xff0c;那就是双指针问题了&#xff0c;令ba1&#xff…

关于搜索引擎链路

一、搜索引擎的的链路 简单流程如下&#xff0c;一般都包括query理解&#xff0c;召回&#xff0c;粗排&#xff0c;精排&#xff0c;重排。 二、query理解&#xff0c;查询词处理 对于进来的query需要有很多道工序做处理。才能让搜索引擎的效果更好、更智能。 2.1 分词 分词…

Ubuntu18.04 OpenSSH升级

升级前版本&#xff1a; rootecs-m2eqyb:/opt# ll total 20912 drwxr-xr-x 2 root root 4096 May 10 16:23 ./ drwxr-xr-x 24 root root 4096 May 10 14:38 ../ -rw-r--r-- 1 root root 1848766 May 10 16:23 openssh-9.7p1.tar.gz -rw-r--r-- 1 root root 18038…

离散数学--图论

目录 1.简单概念 2.握手定理 3.点割集 4.边割集 5.点连通度和边连通度 6.Dijstra算法&&最短路径 7.有向图的连通性 8.图的矩阵表示 9.欧拉图问题 10.哈密尔顿图 1.简单概念 &#xff08;1&#xff09;这个里面的完全图比较重要&#xff0c;完全图是例如k3,k5这…

使用小顶堆找出有序矩阵中第 K 小的元素

leetcode:378. 有序矩阵中第 K 小的元素 import heapqdef kthSmallest(matrix, k):heap []n len(matrix)for i in range(n): # 使用第一列数据构建小顶堆heapq.heappush(heap, (matrix[i][0], i, 0))# 弹出k-1次k1 1while k1 < k:num, i, j heapq.heappop(heap)if j &…

CEF框架:各种各样的Handle(三)——拦截Http的请求与响应

文章目录 CefClientCefRequestHandlerCefResourceRequestHandlerCefResponseFilterOnResourceLoadComplete输出结果前面有两篇提到了CEF框架中的各种各样的HANDLE,然后中间一段时间关注NodeJS去了,今天再补充一点CEF的东西:利用CEF框架中的各种Handle来拦截Http请求与其响应…

JMETER工具:以录制手机app为例

JMETER工具&#xff1a;以录制手机app为例子 JMETER安装和环境配置 pc需要安装jdk&#xff0c;并进行jdk的环境配置&#xff0c;安装好jdk并配置好后&#xff0c;通过命令行输入java –version出现以下界面就表示安装成功&#xff1a; &#xff08;对应的jdk版本不可太低&…

AI学习指南数学工具篇-核方法在Python中的实现

AI学习指南数学工具篇-核方法在Python中的实现 在机器学习领域中&#xff0c;核方法是一种常用的技术&#xff0c;可以帮助我们处理非线性问题。通过将数据映射到高维特征空间&#xff0c;核方法可以将复杂的非线性关系转化为线性关系&#xff0c;从而方便我们使用线性模型进行…

selenium环境安装和web自动化基础

webUI自动化背景 因为web页面经常会变化&#xff0c;所以UI自动化测试的维护成本很高。不如接口的适用面广&#xff0c;所以大部分公司会做接口自动化测试&#xff0c;但是未必会做UI自动化测试&#xff1b; UI自动化测试要做也是覆盖冒烟测试&#xff0c;不会到很高的覆盖率&a…

Flink常见面试题总结

文章目录 1. 简单介绍一下Flink2. Flink 的运行必须依赖Hadoop组件吗?3. Flink 和 Spark Streaming 的区别&#xff1f;4. Flink集群角色5. Flink核心概念5.1 并行度5.2 算子链&#xff08;Operator Chain&#xff09;5.3 任务槽&#xff08;Task Slots&#xff09;5.4 任务槽…

掌握Go语言中的net/http包:编写高性能Web服务

掌握Go语言中的net/http包&#xff1a;编写高性能Web服务 引言HTTP服务器构建基础服务器设置路由与处理函数中间件使用高级配置&#xff08;如TLS/SSL&#xff09; HTTP客户端开发创建与使用HTTP客户端处理响应 高级客户端特性 处理JSON与表单数据接收与解析JSON接收与解析表单…

odoo16版本的render变更

今天在整理文件上传功能时&#xff0c;发现 odoo16的ir_ui_view.py中_render方法不见了&#xff0c;引用出错AttributeError: ir.ui.view object has no attribute _render def _render(self, valuesNone, engineir.qweb, minimal_qcontextFalse):assert isinstance(self.id, …

实现一个自定义 hook,用于强制刷新当前组件

写在前面 在 react 中&#xff0c;如果 state 数据发生变化&#xff0c;我们知道&#xff0c;会重新渲染该组件。 但是这个前提是我们需要依赖 state 数据的变化&#xff0c;那比如我们并不想定义 state&#xff0c;又或者说我们的操作不能引起 state 的变化&#xff0c;此时…

无人机行业招投标技术详解

一、招标流程与原则 无人机行业的招投标流程通常包括招标公告发布、招标文件购买与审查、投标单位资格预审、投标书编制与递交、开标评标、中标公示与合同签订等步骤。在此过程中&#xff0c;必须遵循公开、公平、公正的原则&#xff0c;确保所有符合要求的投标单位都能获得平…

【从C++到Java一周速成】章节11:异常的处理

章节12&#xff1a;异常的处理 【1】try-catch-finally【2】throw和throwsthrow用法 异常就是在程序的运行过程中所发生的不正常的事件&#xff0c;它会中断正在运行的程序。 常见异常&#xff0c;例如&#xff1a; 所需文件找不到 网络连接不通或中断 算术运算错&#xff08;除…

前端实现打印功能

1、引入打印相关的库 在您的Vue项目中,需要先安装一个用于打印的库,如print-js。您可以通过以下命令安装&#xff1a; npm install print-js --save2、在组件中引入并使用&#xff0c;在需要实现打印功能的组件中&#xff0c;先import print-js模块&#xff1a; import print…

SpringBoot Bean

配置优先级 Bean的管理 从IOC容器中获取Bean对象&#xff1a;注入IOC容器对象 bean的作用域 Bean对象默认在容器启动时实例化 Lazy在第一次使用时初始化 Bean的管理&#xff1a;第三方Bean 引入依赖&#xff0c;每次解析创建新对象&#xff0c;浪费资源 将第三方对象交给…

如何搭建springBoot项目中的全局异常处理和自定义异常处理

目录 1 什么是异常 2 异常的种类 3 解决异常的方式 4 全局异常处理器和自定义异常处理器 5 测试异常处理 1 什么是异常 异常&#xff08;Exception&#xff09;是在程序执行过程中出现的一种特殊情况或错误。它可以是由于程序逻辑错误、运行环境问题、用户输入错误等原因…

【AI基础】反向传播

文章目录 1. 先写出第一步2.将其封装成函数3. pytorch版 1. 先写出第一步 # 定义输入值和期望输出 x_1 40.0 x_2 80.0 expected_output 60.0 初始化# 定义权重 w_1_11 0.5 w_1_12 0.5 w_1_13 0.5 w_1_21 0.5 w_1_22 0.5 w_1_23 0.5w_2_11 1.0 w_2_21 1.0 w_2_31 1…

基于 vLLM 搭建 DeepSeek-V2 Chat 服务

直奔主题。 安装vLLM 官方实现的代码还没有 merge 到 vLLM 主分支&#xff0c;所以直接 git clone DeepSeek 的分支。 git clone https://github.com/zwd003/vllm.git cd vllm pip install -e .源码安装大概耗时 10 分钟。 OpenAI 接口规范启动 官方 Github 放的是单条推理…