当前位置: 首页 > news >正文

card滑动效果

 

image

image

 

<template><view class="member-benefits"><!-- 卡片滑动容器 --><view class="card-slider" :style="{background: currentSliderGradient,transition: 'background 0.5s ease'  // 渐变背景平滑过渡}"><view class="title">表头</view><view class="slider-track" :style="{ transform: `translateX(-${currentIndex * (110 - overlapPercent)}%)` }"@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"@touchcancel="handleTouchEnd"><view v-for="(level, index) in levels" :key="level.level" class="benefit-card" :class="{'active-card': index === currentIndex,'prev-card': index === currentIndex - 1,'next-card': index === currentIndex + 1}" :style="{ background: currentCardSliderGradient }"><view class="slider-stau">{{ level.status }}</view><view class="slider-con"><view><h2 class="benefit-title" :style="{ color: currentLevelData.testCol }">{{ level.level }}</h2><p class="benefit-desc1" :style="{ color: currentLevelData.testCol }">匹配 <text :style="{ color: currentLevelData.pricColor }">{{ level.matchTime }}</text>服务期 <text :style="{ color: currentLevelData.pricColor }">{{ level.cycle }}</text></p></view><image class="slider-con_img" src="https://qiniu.5ug.top/alabo/dev_uploads/lan/logo.png" /></view><p class="benefit-desc" :style="{ color: currentLevelData.testCol }">权益 <text :style="{ color: currentLevelData.pricColor }">{{ level.price }}</text>券 <text :style="{ color: currentLevelData.pricColor }">{{ level.ticket }}</text></p></view></view><!-- 提示语 --><view class="tips" v-if="currentLevelData.tips1" :style="{ background: currentLevelData.tipsBg }"><view class="tips-con"><view class="tips-tips1">{{ currentLevelData.tips1 }}</view><view>{{ currentLevelData.tips2 }}<text style="color:#fdca5c">{{ currentLevelData.profit }}</text></view></view><image class="tips-img" src="https://qiniu.5ug.top/alabo/dev_uploads/lan/logo.png" /></view></view><view class="upgrade-con"><view class="upgrade-tips"> 轮播文字 </view><view class="upgrade-section"><h3 class="upgrade-title">title</h3><ul class="upgrade-tasks"><!-- <li v-for="(task, index) in currentLevelData.upgrade.tasks" :key="index" class="upgrade-tasks_li"> --><li v-for="(task, index) in tasks" :key="index" class="upgrade-tasks_li"><view class="upgrade-tasks_li_t"><img :src="task.icon" alt="任务图标" class="upgrade-tasks_li_ticon" /><span>{{ task.text }}</span></view><view v-for="(dItem, dIndex) in task.device" :key="dIndex" class="upgrade-device"><text class="upgrade-device_dian">・</text>text1{{ dItem.v1 }}text2{{ dItem.examine }},text3{{ dItem.discount }}</view></li></ul></view></view><view v-if="currentLevelData.button" class="upgrade-button">¥ price{{ currentLevelData.button.price1 }}元+券{{ currentLevelData.button.price2 }}元 {{currentLevelData.button.text}}</view></view>
</template><script>
export default {data() {return {currentIndex: 0, // 当前卡片索引startX: 0, // 触摸起始X坐标moveX: 0, // 触摸移动X坐标isDragging: false, // 是否正在拖动overlapPercent: 20, // 卡片重叠百分比(控制前后卡片显示范围)levels: [{level: "title1",cardSliderGradient: 'linear-gradient(to right, #f5fcfc, #d2e0e7, #d5e6ec, #a3bac6)',sliderGradient: "linear-gradient(to bottom, #7d979e 0%, #446f7d 100%)",status: '未达成',matchTime: '1-7天',cycle: '5天', price: '1000元',ticket: '100元',pricColor: '#446f7d',testCol: "#88939b",button: { price1: 1000, price2: 100, text: "直接开通" },},{level: "title2",cardSliderGradient: 'linear-gradient(to right, #fffbf1, #fbdcb0, #fae9d1, #fab35d)',sliderGradient: "linear-gradient(to bottom, #ca834a 0%, #8e5324 100%)",status: '未达成',matchTime: '1-7天',cycle: '6天',price: '3000元', ticket: '100元',pricColor: '#8e5324',testCol: "#b78d64",button: { price1: 3000, price2: 100, text: "直接开通" },},],tasks: [{icon: "https://qiniu.5ug.top/alabo/dev_uploads/lan/logo.png",text: "title5",device: [{ v1: '《等级1》', examine: '8个任务', discount: '70折' },{ v1: '《等级2》', examine: '6个任务', discount: '78折' },]},{icon: "https://qiniu.5ug.top/alabo/dev_uploads/lan/logo.png",text: "title6",device: [{ v1: '《任务1》', examine: '三个四星', discount: '90折' },{ v1: '《任务2》', examine: '三个三星', discount: '92折' },]},],};},computed: {currentSliderGradient() {return this.levels[this.currentIndex].sliderGradient || "linear-gradient(135deg, #ee631c 0%, #f89e53 100%)";},currentCardSliderGradient() {return this.levels[this.currentIndex].cardSliderGradient || "";},currentLevelData() {return this.levels[this.currentIndex] || {};}},methods: {handleTouchStart(e) {this.isDragging = true;this.startX = e.touches[0].clientX;},handleTouchMove(e) {if (!this.isDragging) return;this.moveX = e.touches[0].clientX;},handleTouchEnd() {if (!this.isDragging) return;const diffX = this.moveX - this.startX;const threshold = 50; // 滑动触发阈值const cardWidthRatio = 100 - this.overlapPercent + 10;if (diffX > threshold && this.currentIndex > 0) {this.currentIndex--;} else if (diffX < -threshold && this.currentIndex < this.levels.length - 1) {this.currentIndex++;}this.isDragging = false;this.startX = 0;this.moveX = 0;},},
};
</script><style scoped>
@import './two.scss';
</style>

  

.title {position: absolute;top: 25rpx;left: 42%;color: #fff;font-size: 32rpx;
}.member-benefits {font-family: "Microsoft Yahei", sans-serif;max-width: 600px;
}/* 滑动容器核心样式 */
.card-slider {position: relative;overflow: hidden;padding: 250rpx 20rpx 40rpx 20rpx;
}.slider-track {display: flex;/* 核心动画:位置变化时平滑过渡 */transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);will-change: transform;/* 告诉浏览器提前优化渲染 */
}/* 卡片基础样式 */
.benefit-card {flex-shrink: 0;width: 90%;margin: 0 1%;border-radius: 18px;/* padding: 20px; */box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);/* 所有属性变化均有动画 */will-change: transform, opacity, box-shadow;
}/* 当前激活卡片样式(放大+增强阴影) */
.benefit-card.active-card {transform: scale(1);opacity: 1;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);z-index: 3;/* 层级最高,覆盖前后卡片 */
}/* 前一张卡片样式(缩小+半透明) */
.benefit-card.prev-card {transform: scale(0.9) translateX(-5%);/* 缩小并向右偏移 *//* opacity: 0.7; */z-index: 2;
}/* 后一张卡片样式(缩小+半透明) */
.benefit-card.next-card {transform: scale(0.9) translateX(-5%);/* 缩小并向左偏移 *//* opacity: 0.7; */z-index: 2;
}/* 非相邻卡片样式(进一步缩小+降低透明度) */
.benefit-card:not(.active-card):not(.prev-card):not(.next-card) {transform: scale(0.8);opacity: 0.5;z-index: 1;
}/* 卡片内部元素样式 */
.benefit-badge {width: 70px;height: 70px;margin-bottom: 12px;transition: transform 0.3s ease;
}.active-card .benefit-badge {transform: scale(1.1);/* 当前卡片徽章轻微放大 */
}.benefit-title {font-size: 22px;margin-bottom: 10px;font-weight: 600;
}.slider-stau {display: inline;color: #fff;padding: 8rpx 18rpx;font-size: 20rpx;background-color: #b8c3c2;border-radius: 18rpx 0 20rpx 0;
}.slider-con {display: flex;padding: 30rpx;
}.benefit-desc1 {font-size: 15px;color: #555;margin-bottom: 6px;
}.benefit-desc {font-size: 15px;color: #555;margin-bottom: 6px;padding: 0 30rpx 20rpx 30rpx;
}.slider-con_img {width: 200rpx;height: 120rpx;margin: auto;
}/* 其他区域样式保持不变 */
.tips {padding: 8px;border-radius: 4px;margin-top: 12px;color: #fffafd;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;
}.tips-con {display: flex;flex-direction: column;
}.tips-tips1 {font-size: 20rpx;margin-bottom: 15rpx;
}.tips-img {width: 40px;height: 24px;
}.upgrade-con {background-color: #f8f8f8;border-radius: 30rpx 30rpx 0 0;margin-top: -20rpx;padding-top: 30rpx;position: relative;
}.upgrade-tips {background-color: #f9e8df;color: #f56f29;padding: 8px;margin: 0 20rpx;border-radius: 4px;margin-bottom: 16px;
}.upgrade-section {max-height: 46vh;overflow: scroll;background-color: #fff;border-radius: 8px;padding: 32rpx 32rpx 0 32rpx;margin: 0 20rpx;/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}.upgrade-title {font-size: 16px;margin-bottom: 8px;width: 260rpx;
}.upgrade-tasks {list-style: none;padding: 0;
}.upgrade-tasks_li {margin-bottom: 15px;
}.upgrade-tasks_li_t {display: flex;align-items: center;
}.upgrade-tasks_li_ticon {width: 40px;height: 24px;margin-right: 8px;
}.upgrade-device {margin-left: 70rpx;display: flex;/* align-items: center */color: #a6a6aa;font-size: 25rpx;
}.upgrade-device_dian {font-size: 40rpx;
}.upgrade-button {width: 83%;margin: 20rpx auto 0 auto;background-color: #722ed1;color: #fff;padding: 10px;border-radius: 4px;text-align: center;cursor: pointer;
}

 

http://www.hskmm.com/?act=detail&tid=30794

相关文章:

  • 学习日报
  • 2025年成都一对一培训机构优选榜:成都一对一辅导/补习/培训/补习班/辅导机构推荐,成都美博教育脱颖而出
  • 打印机共享修复,打印机无法共享,打印机修复工具下载及安装教程
  • web中静态资源加载失败的降级处理
  • 2025年保温隔热挤塑泡沫板推荐哪个厂家好?xps挤塑板/石墨聚苯板公司推荐
  • 实用指南:消息队列 MQ
  • 基于 Docker 部署 Alpine Linux:从入门到实践
  • 行列式按一行或列展开
  • 2025 年最新推荐高性价比实木家具厂家排行榜:涵盖实木床餐边柜/餐桌斗柜/书柜/梳妆台/床头柜/餐椅沙发/休闲椅优质厂家精选
  • 多智能体微服务实战(3/4):Aspire 打造本地 K8s 开发环境
  • 2025 年水下打捞公司服务推荐榜:水下打捞手机/水下打捞黄金/水下打捞戒指/水下打捞沉船/水下打捞转头,聚焦专业与高效,助力解决各类水下应急需求
  • SAP 中物料视图必填字段(用下程序定期校验)
  • 一文读懂Optimism,Arbitrum,ZK Rollups 共识算法
  • 【光照】UnityURP渲染中的HDR
  • 在jupyter notebook中使用自己创建的conda虚拟环境的Python内核
  • Flutter顶部状态栏显示,安全区设置等,防止各种异性屏挡住应用操作栏
  • LGP11189 [KDOI R10] 水杯降温 学习笔记
  • notepad++中使用正则表达式过滤数据
  • 从孔子到马斯克:理解原理与问对问题的智慧史
  • startPage()分页总数问题
  • 2025 年电感源头厂家最新推荐排行榜:聚焦功率一体成型屏蔽共模等系列,助力企业精准选优质制造商屏蔽/共模/贴片共模/磁环/磁胶SWPA电感厂家推荐
  • 2025 年风机厂家最新推荐排行榜:聚焦交流 / 直流 / 无刷 / 大吸力 / 调速 / 小型高压等多类型风机,精选优质企业助力采购决策
  • 简单高效的SQL注入测试方法:Break Repair技术详解
  • AG Grid推出全新MCP服务器——让AI更智能地理解你的数据表格!
  • 2025 年自动供料系统厂家推荐榜:集中/挤出机/高速混合机/混料机/搅拌机/粉体颗粒/反应釜/SPC自动供料系统厂家,聚焦高效环保,张家港华耐德环保科技引领行业
  • uniapp 判断在特定app或h5里还需要判断当前环境
  • 工业流体输送 “心” 选择!2025 螺杆泵、隔膜泵、磁力泵、自吸泵、计量泵五大靠谱厂家推荐 —— 从研发实力到售后保障的全方位筛选
  • 盘点2025年试验箱十大品牌top,涵盖高低温湿热/小型/步入式/品质好有保障!
  • Excel处理控件Aspose.Cells教程:使用Python将TXT文件转换为CSV
  • 2025 年干燥机厂商最新推荐排行榜:聚焦实验室与工业用优质设备,精选实力品牌供采购参考工业喷雾 / 陶瓷喷雾 / 制粒 / 奶粉喷雾 / 离心喷雾干燥机厂家推荐