小程序首页轮播图设计

效果图

微信小程序的数据详解

indicator-dots:是否显示面板指示点【默认false  】

indicator-color:指示点颜色【默认rgba(0, 0, 0, .3)】

indicator-active-color:当前选中的指示点颜色【默认#000000】

autoplay:是否自动切换【默认false】

interval:自动切换时间间隔【默认5000】

duration:滑动动画时长【默认500】

circular:是否采用衔接滑动【默认false】

vertical:滑动方向是否为纵向【默认false】

源码如下 

index.wxml

<view class="index-container"><view class="index-header"><van-search value="{{ searchInfo }}" shape="round" background="#9c7bf0" placeholder="请输入搜索内容" /><view class="index-swiper"><swiper class="myswiper" indicator-dots="true" indicator-color="#fff" indicator-active-color="#9c7bf0" autoplay="true" interval="5000" duration="500" circular="true"><swiper-item><image class="swiper-img" mode="heightFix" src="../../images/swiper/shop1.png"></image></swiper-item><swiper-item><image class="swiper-img" mode="heightFix" src="../../images/swiper/shop2.png"></image></swiper-item></swiper></view></view>
</view>

index.wxss

.index-header {background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));width: 100%;height: 190px;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%;
}
.index-swiper{padding: 10px;
}
.swiper-img {height: 140px;
}

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

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

相关文章

Redis的过期策略以及内存淘汰机制

目录 一、过期策略1.1、定时删除1.1.1、过期1.1.2、过期的 key 集合1.1.3、定时扫描策略1.1.4、 Redis 中所有的 key 在同一时间过期了&#xff0c;会出现怎样的结果1.1.5、从库的过期策略 1.2、惰性删除1.3、定时删除和惰性删除的总结 二、缓存淘汰算法2.1、缓存淘汰算法概述2…

ngsoc使用指南

和威胁告警差不多。 ngsoc是以资产为核心&#xff0c;以安全事件为管理的关键流程&#xff0c;建立一套威胁检测&#xff0c;相应&#xff0c;预测&#xff0c;和持续监控分析&#xff0c;一体化的监控与相应平台。 和天眼的区别&#xff1a;会把天眼的告警&#xff0c;其他安…

MFC扩展库BCGControlBar Pro v33.5新版亮点 - 其他增强功能

BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。 我们的组件可以轻松地集成到您的应用程序中&#xff0c;并为您节省数百个开发和调试时间。 BCGControlBar专业版 v33.5已正式发布了&#xff0c;此版本包含了Ribbon&#xff08;功能区&#xff09;自定义…

Ansible自动化运维工具的认识

目录 一、Ansible概述 二、Ansible特点 三、Ansible应用 1、使用者 2、Ansible工具集合 3、作用对象 四、Ansible的搭建 1、实验环境 2、环境准备 Ansible&#xff1a; 3、创建ssh免密交互登录 client端环境准备 五、Ansible配置 六、Ansible命令 1、ansible 实…

【软件测试】web测试bug定位思路总结,“我“不再背锅...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 需要掌握的知识 …

ASUS华硕ROG幻14 2021款GA401QM原厂Win10系统工厂模式带ASUS Recovery恢复功能

自带恢复分区、所有驱动、出厂主题壁纸LOGO、Office办公软件、奥创控制中心等预装程序 所需要工具&#xff1a;16G或以上的U盘(非必需) 文件格式&#xff1a;HDI,SWP,OFS,EDN,KIT,TLK多个底包 文件大小&#xff1a;11.34GB 注&#xff1a;恢复时会清空电脑上所有盘的数据&…

系列七、VMware中的CentOS服务不息屏

一、场景 VMware中安装好CentOS7等虚拟机后&#xff0c;过一段时间会自动息屏&#xff0c;这个时候如果想执行操作&#xff0c;需要重新输入 用户名/密码&#xff0c;体验感不好。 二、解决方法 应用程序》系统工具》设置》Privacy》锁屏》自动锁屏&#xff08;关闭&#xff0…

SpringBoot 统一功能的处理

SpringBoot 统一功能的处理 文章目录 SpringBoot 统一功能的处理1. 用户登录权限校验1.1 最初用户登录验证1.2 Spring AOP 统一用户登录验证的问题1.3 SpringAOP 拦截器1.3.1 实现自定义拦截器1.3.2 将自定义拦截器加入到系统配置 1.4 拦截器实现原理1.4.1 实现流程图1.4.2 实现…

Java 串口通讯 Demo

为什么写这篇文章 之前职业生涯中遇到的都是通过tcp协议与其他设备进行通讯&#xff0c;而这个是通过串口与其他设备进行通讯&#xff0c;意识到这里是承重板的连接&#xff0c;但实际上比如拉力、压力等模拟信号转换成数字信号的设备应该是有相当一大部分是通过这种方式通讯的…

Redis数据结构 — List

目录 链表结构设计 ​编辑链表节点结构设计 链表的优势与缺陷 Redis 的 List 对象的底层实现之一就是链表。C 语言本身没有链表这个数据结构的&#xff0c;所以 Redis 自己设计了一个链表数据结构。 链表结构设计 typedef struct list {//链表头节点listNode *head;//链表…

软件测试人员的基本功包括哪些?

什么是基本功&#xff1f;百度到的结果是&#xff1a;从事某种工作所必需的基本的知识和技能。 推理1&#xff1a;“基本”二字&#xff0c;意味着基本功必定是来源测试工作的基本流程。 推理2&#xff1a;“必须”二字&#xff0c;就意味者无论你是高级的测试开发&#xff0c;…

spring.profiles的使用详解

本文来说下spring.profiles.active和spring.profiles.include的使用与区别 文章目录 业务场景spring.profiles.active属性启动时指定 spring.profiles.include属性配置方法配置位置配置区别 用示例来使用和区分测试一测试二测试三 编写程序查看激活的yml文件本文小结 业务场景 …

TypeScript 学习笔记 环境安装-类型注解-语法细节-类-接口-泛型

文章目录 TypeScript 学习笔记概述TypeScript 开发环境搭建 类型注解类型推断 数据类型JS的7个原始类型Array数组object、Object 和 {}可选属性 ? 和 可选链运算符?. function函数TS类型: any类型 | unknow类型TS类型: void类型TS类型&#xff1a;never类型 &#xff08;几乎…

noSQL的小练习

目录 Redis&#xff1a; 1、 string类型数据的命令操作&#xff1a; 2、 list类型数据的命令操作&#xff1a; 3、 hash类型数据的命令操作&#xff1a; MongoDB&#xff1a; 1. 创建一个数据库 名字grade 2. 数据库中创建一个集合名字 class 3. 集合中插入若…

C++基础算法二分篇

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;C算法 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 主要讲解二分算法&#xff0c;分别讲解了整数二分和浮点二分 文章目录…

MobPush:Android SDK 集成指南

开发工具&#xff1a;Android Studio 集成方式&#xff1a;Gradle在线集成 安卓版本支持&#xff1a;minSdkVersion 19 集成准备 注册账号 使用PushSDK之前&#xff0c;需要先在MobTech官网注册开发者账号&#xff0c;并获取MobTech提供的AppKey和AppSecret&#xff0c;详情可…

elasticsearch基本操作

elasticsearch 下面参数详细解释 java 搜索查询看官方文档 https://www.elastic.co/guide/en/elasticsearch/client/java-api-client/8.8/connecting.html#_your_first_request{"name" : "Tom Foster","cluster_name" : "elasticsearch&q…

vue3+vite+ts+vant 开发浙里办H5应用流程和注意事项

vue3vitets 开发浙里办H5应用流程和注意事项 最近有个项目是要开发到浙里办的一个H5项目,记录一些问题; 浙里办irs系统内node版本和npm版本如下建议切到他们的版本再进行开发这样问题少一点 1.因为浙里办有自己的irs系统 需要吧前端整体的代码传上去 除了 打包后的dist 和 no…

【Win10系统下载Python3】

Python3官网&#xff1a;https://www.python.org/downloads/windows/ 注

TCP/IP网络编程 第十二章:I/O复用

基于I/O复用的服务器端 多进程服务器端的缺点和解决方法 为了构建并发服务器&#xff0c;只要有客户端连接请求就会创建新进程。这的确是实际操作中采用的种方案&#xff0c;但并非十全十美&#xff0c;因为创建进程时需要付出极大代价。这需要大量的运算和内存空间&#xff…