微信小程序(九)轮播图

注释很详细,直接上代码

上一篇

新增内容:
1.轮播容器的基本属性
2.轮播图片的尺寸处理

index.wxml

<view class="navs"><text class="active">精选</text><text>手机</text><text>食品</text><text>内衣</text><text>生鲜</text><text>母婴</text>
</view> //indicator-dots显示面板指示点
//indicator-active-color当前选中的指示点颜色
//autoplay 自动切换
//circular是否采用衔接滑动
//duration滑动动画时长(单位ms)
//interval自动切换时间间隔(单位ms)
<swiper indicator-dots indicator-active-color="#bb3b2e" autoplay circular duration="1000" interval="2000"> <swiper-item><image src="/static/uploads/slide_1.jpg"></image>    </swiper-item><swiper-item><image src="/static/uploads/slide_2.jpg"></image>    </swiper-item><swiper-item><image src="/static/uploads/slide_3.jpg"></image>    </swiper-item>
</swiper>

index.wxss

.navs{display: flex;justify-content: space-evenly;background-color: white;height:40px;align-items: center;font-size: 14px;
}.active{color: #37b626;border-bottom: 1px solid #00b26a;
}//设置滑动视图容器大小
swiper{width: 750rpx;height: 320rpx;
}//设置图片大小(因图片而异,最好是图片本身就适配的)
swiper image{width: 750rpx;height: 320rpx;
}

效果演示:

在这里插入图片描述
下一篇

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

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

相关文章

应用案例:Ruff工业设备数据采集,为生产制造企业数字化转型赋能

导读&#xff1a;某金属材料生产制造企业&#xff0c;引进了整套Ruff数据采集方案&#xff0c;将Ruff网关采集到的PLC数据接入到Ruff IoT管理云平台&#xff0c;帮助客户实现覆盖全厂区、车间所有设备的数字化、可视化管理&#xff0c;避免了意外停机风险&#xff0c;IT运维工作…

C# 实现 Word 加盖骑缝章效果

目录 实现效果 范例运行环境 Office DCOM 配置 设计实现 创建stamp图章类 电子章图片的计算与定位 旋转图片方法 总结 实现效果 在OA的自动化处理系统中&#xff0c;通过审批的最终节点&#xff0c;可能会对WORD文件加盖电子章&#xff0c;比如定位带有指定文字的Ra…

洛谷刷题-【入门2】分支结构

目录 1.苹果和虫子 题目描述 输入格式 输出格式 输入输出样例 2.数的性质 题目描述 输入格式 输出格式 输入输出样例 3.闰年判断 题目描述 输入格式 输出格式 输入输出样例 4.apples 题目描述 输入格式 输出格式 输入输出样例 5.洛谷团队系统 题目描述 …

MySQL(基础篇)——SQL

一.SQL分类 二.DDL(数据定义语言) 1.DDL——数据库操作 ① 查询 查询所有数据库 SHOW DATABASES 查询当前所处数据库 SELECT DATABASE() ② 创建 CREATE DATABASE [IF NOT EXISTS] 数据库名(通常以db结尾) [DEFAULT CHARSET 字符集] [COLLATE 排序规则] ③ …

【网络安全 -> 防御与保护】专栏文章索引

为了方便 快速定位 和 便于文章间的相互引用等 作为一个快速准确的导航工具 网络安全——防御与保护 &#xff08;一&#xff09;.信息安全概述 &#xff08;二&#xff09;.防火墙组网

第04章_IDEA的安装与使用(上)(认识,卸载与安装,JDK相关设置,详细设置,工程与模块管理,代码模板的使用)

文章目录 第04章_IDEA的安装与使用&#xff08;上&#xff09;本章专题与脉络1. 认识IntelliJ IDEA1.1 JetBrains 公司介绍1.2 IntelliJ IDEA 介绍1.3 IDEA的主要优势&#xff1a;(vs Eclipse)1.4 IDEA 的下载 2. 卸载与安装2.1 卸载过程2.2 安装前的准备2.3 安装过程2.4 注册2…

逻辑回归中的损失函数梯度下降

一、引言 逻辑回归中的损失函数通常采用的是交叉熵损失函数&#xff08;cross-entropy loss function&#xff09;。在逻辑回归中&#xff0c;我们通常使用sigmoid函数将线性模型的输出转换为概率值&#xff0c;然后将这些概率值与实际标签进行比较&#xff0c;从而计算损失。 …

《统计学习方法:李航》笔记 从原理到实现(基于python)-- 第 2章感知机

文章目录 第 2章感知机2.1 感知机模型2.2 感知机学习策略2.2.1 数据集的线性可分性2.2.2 感知机学习策略 2.3 感知机学习算法2.3.1 感知机学习算法的原始形式2.3.2 算法的收敛性2.3.3 感知机学习算法的对偶形式 实践&#xff1a;二分类模型&#xff08;iris数据集&#xff09;数…

web漏洞总结大全(基础)

前言 本文章是和cike_y师傅一起写的&#xff0c;cike_y博客&#xff1a;https://blog.csdn.net/weixin_53912233?typeblog 也欢迎大家对本文章进行补充和指正&#xff0c;共同维护这个项目&#xff0c;本文的github项目地址&#xff1a; https://github.com/baimao-box/Sum…

Linux系统Shell脚本编程之条件语句

一、条件测试 Shell 环境根据命令执行后的返回状态值 " $? " 来判断是否执行成功&#xff0c;当返回值为0时表示成功&#xff0c;否则表示失败或异常&#xff08;非0值&#xff09;。使用专门的测试工具 test 命令&#xff0c;可以对特定条件进行测试&#xff0c;并…

VI / VIM的使用

vi/vim 的区别简单点来说&#xff0c;它们都是多模式编辑器&#xff0c;不同的是 vim 是 vi 的升级版本&#xff0c;它不仅兼容 vi 的所有指令&#xff0c;而且 还有一些新的特性在里面。例如语法加亮&#xff0c;可视化操作不仅可以在终端运行&#xff0c;也可以运行于 x win…

【Linux】糟糕,是心动的感觉——与Linux的初次相遇

初识Linux 导言一、计算机的发展1.1 历史背景1.2 计算机的发明 二、操作系统2.1 什么是操作系统&#xff1f;2.2 操作系统的诞生2.3 操作系统的发展2.3.1 批处理系统的发展2.3.2 分时系统2.3.3 实时系统2.3.4 通用操作系统 2.4 UNIX操作系统2.4.1 UNIX的诞生2.4.2 UNIX的发展 2…

Git学习 -- 分支合并、版本修改相关

目录 learn GIT Learn Git Branching merge和rebase的使用 基础命令 版本回退 工作区和暂存区 管理修改 撤销修改 删除修改 learn GIT Learn Git Branching 这是Gitee上的Git学习教程 Learn Git Branching Git Rebase Learn Git Branching 最终的实操 merge和rebase的…

爬虫正则+bs4+xpath+综合实战详解

Day3 - 1.数据解析概述_哔哩哔哩_bilibili 聚焦爬虫&#xff1a;爬取页面中指定的页面内容 编码流程&#xff1a;指定url -> 发起请求 -> 获取响应数据 -> 数据解析 -> 持久化存储 数据解析分类&#xff1a;正则、bs4、xpath(本教程的重点) 数据解析原理概述&am…

2024年 全新 HTTP 客户端 你用了?

我们平时开发项目的时候&#xff0c;经常会需要远程调用下其他服务提供的接口&#xff0c;于是我们会使用一些 HTTP 工具类比如 Hutool 提供的 HttpUtil。SpringBoot 3.0 出了一个Http Interface的新特性&#xff0c;它允许我们使用声明式服务调用的方式来调用远程接口&#xf…

重磅!Salesforce推出UE+无限版餐套,企业如何选择?

孤立的应用程序和脱节的技术堆栈是所有企业的噩梦。目前&#xff0c;市场上产品和服务种类繁多&#xff0c;无缝集成和清晰、直接的购买流程可以决定整体体验的成败。 Salesforce云以及其他应用程序在过去几年中经历了巨大增长。随着越来越多的功能被捆绑在一起&#xff0c;Un…

威联通QNAP NAS结合cpolar内网穿透实现公网远程访问NAS中存储的文件

文章目录 推荐 前言1. 威联通安装cpolar内网穿透2. 内网穿透2.1 创建隧道2.2 测试公网远程访问 3. 配置固定二级子域名3.1 保留二级子域名3.2 配置二级子域名 4. 使用固定二级子域名远程访问 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣…

Tarjan 算法(超详细!!)

推荐在 cnblogs 上阅读 Tarjan 算法 前言 说来惭愧&#xff0c;这个模板仅是绿的算法至今我才学会。 我还记得去年 CSP2023 坐大巴路上拿着书背 Tarjan 的模板。虽然那年没有考连通分量类似的题目。 现在做题遇到了 Tarjan&#xff0c;那么&#xff0c;重学&#xff0c;开…

“趣味夕阳,乐享生活”小组活动(第二节)

立冬以来&#xff0c;天气日渐寒冷&#xff0c;气温变化较大&#xff0c;各种传染病多发&#xff0c;为进一步增强老年人冬季预防传染病保健意识及科学合理健康的生活方式。近日&#xff0c;1月22日&#xff0c;南阳市人人社工灌涨站开展了“趣味夕阳&#xff0c;乐享生活”小组…

【C++ | 数据结构】从哈希的概念 到封装C++STL中的unordered系列容器

文章目录 一、unordered系列容器的底层结构 - 哈希1. 哈希概念2. 哈希冲突 二、解决哈希冲突方法一&#xff1a;合理设计哈希函数&#x1f6a9;哈希函数设计原则&#x1f6a9;常见哈希函数 方法二&#xff1a;开闭散列&#x1f6a9;闭散列线性探测法&#xff08;实现&#xff0…