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

uniapp:swiper-demo效果

单元格轮播

在这里插入图片描述

<swiper class="swiper1" :circular="true" :autoplay="true" interval="3000" previous-margin="195rpx" next-margin="195rpx"><swiper-item v-for="(item,index) in 5" :key="index"><view class="swiper-item"><image src="../../static/newimg/7.png" mode="" class="logo"></image><view class="btn df-aic-jusb"><view class="left"><image src="../../static/newimg/8.png" mode=""></image><text class="fsz-30 fw-b color-yello">1000</text><text class="fsz-16 fw-b color-yello">USDT</text></view><view class="right fsz-30 color-000 t-c">首卡铸造</view></view></view></swiper-item>
</swiper>
.swiper1{height: 850rpx;margin: 50rpx auto 100rpx;.swiper-item{width: 342rpx;height: 524rpx;background: #1C1C1C;border-radius: 20rpx;padding-top: 15rpx;}.logo{display: block;width: 310rpx;height: 418rpx;border-radius: 20rpx;margin: auto;border: 1rpx solid #F7DA4A;}.btn{margin:20rpx auto 0;padding: 0 14rpx;.left{display: flex;align-items: baseline;uni-image{width: 20rpx;height: 20rpx;margin-right: 8rpx;}}.right{width: 130rpx;height: 50rpx;background: #F7DA4A;border-radius: 10rpx;font-size: 26rpx;color: #050500;}}
}
http://www.lryc.cn/news/186498.html

相关文章:

  • Graphviz 作图工具
  • vue、vuex状态管理、vuex的核心概念state状态
  • 【QT】Qt Application Manager启动应用源码分析
  • MyBatisPlus(十)判空查询
  • AIGC(生成式AI)试用 8 -- 曾经的难题
  • 文化主题公园旅游景点3d全景VR交互体验加深了他们对历史文化的认知和印象
  • 京东数据分析平台:2023年8月京东奶粉行业品牌销售排行榜
  • Java 21:虚拟线程介绍
  • Redis-缓存穿透,缓存击穿,缓存雪崩
  • 如何使用Docker实现分布式Web自动化!
  • 从零开始:制作出色的产品原型图的详细教程
  • 美国访问学者签证如何申请加急办理?
  • 33 WEB漏洞-逻辑越权之水平垂直越权全解
  • 【FreeRTOS】【STM32】02 FreeRTOS 移植
  • STM32F4X 内部FLASH使用
  • 减小windows或linux虚拟机导出ova体积大小
  • WPF livecharts 折线图遮挡数字问题
  • 电力系统数字化升级改造之配电室无人值守
  • 集合Set
  • TCP/IP(二)导论
  • Java之UDP,TCP的详细解析
  • 【总结】kubernates crd client-java 关于自定义资源的增删改查
  • 蓝牙主要知识,一文概览
  • Linux 守护进程
  • 自动驾驶技术的基础知识
  • 解决:yarn 无法加载文件 “C:\Users\XXXXX\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本“ 的问题
  • 【JVM--StringTable字符串常量池】
  • Large Language Models Meet Knowledge Graphs to Answer Factoid Questions
  • blender 之视频渲染(以三维重建path为例)
  • leetcode做题笔记166. 分数到小数