初识微信小程序之swiper和swiper-item的基本使用

news2025/3/17 3:08:14

在我还没接触到微信小程序之前,通常使用轮播要么手写或使用swiper插件去实现,当我接触到微信小程序之后,我看到了微信小程序的强大之处,让我为大家介绍一下吧!
swiper与swiper-item一起使用可以做轮播图

基本使用,上代码:

<swiper class="swiper-container">
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

样式

.swiper-container {
  height: 150px;
}
.item{
  height: 100%;
  text-align: center;
  line-height: 150px;
}
swiper-item:nth-child(1) .item{
  background-color: pink;
}
swiper-item:nth-child(2) .item{
  background-color: red;
}
swiper-item:nth-child(3) .item{
  background-color: gold;
}

请添加图片描述

swiper当中常用的属性

属性类型默认值说明
indicator-dotsbooleanfalse是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0,.3)指示点颜色
indicator-active-colorcolorfalse当前选中的指示点颜色
autoplaybooleanfalse是否自动切换
intervalnumber5000自动切换时间间隔
circularbooleanfalse是否采用衔接滑动
<!-- 属性 indicator-dots -->
<swiper class="swiper-container" indicator-dots indicator-color="#fff" indicator-active-color="red" autoplay interval="2000" circular>
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

请添加图片描述

学如逆水行舟,不进则退,感谢大家的阅读!

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

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

相关文章

软件无线电系列——带通信号采样定理

本节目录 一、带通信号采样定理 1、带通信号采样定理的定义 2、带通信号采样定理的证明本节内容 一、带通信号采样定理 1、带通信号采样定理的定义 Nyquist采样定理是对频谱分布在(0,fH)上的基带信号的采样分析的&#xff0c;如果信号的频谱分布在某一限定的频带(fL,fH)上&…

【unity与android的交互(一)】安卓打包相关的常见参数详解

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

hadoop单机ssh免密登录

1. 在hadoop目录下生成密钥对 [rootmaster centos]# cd /usr/apps/hadoop-2.7.1/ [rootmaster hadoop-2.7.1]# ssh-keygen -t rsa //在hadoop目录下生成密钥对 2.找到密钥对的位置 [rootmaster hadoop-2.7.1]# find / -name .ssh //找到密钥对的位置 cd [rootmaster hadoo…

vscode 运行 java 项目之解决“Build failed, do you want to continue”的问题

Visual Studio Code运行 java 起来似乎比 IDEA 更轻量、比 eclipse 更友好&#xff0c;是不可多得的现代编译法宝。 安装好官方推荐的 java 扩展包后&#xff0c;就可以运行 java 代码了。功能 比 code runner 强&#xff0c;支持 gradle、maven、普通java项目&#xff0c;运行…

深度学习 Day27——J7对于ResNeXt-50算法的思考

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子 文章目录 前言问题分析 前言 关键问题&#xff1a;ResNeXt-50中conv_shortcutFalse时…

Windows蓝牙驱动开发之模拟HID设备(一)(把Windows电脑模拟成蓝牙鼠标和蓝牙键盘等设备)

by fanxiushu 2024-03-14 转载或引用请注明原作者 把Windows电脑模拟成蓝牙鼠标和蓝牙键盘&#xff0c;简单的说&#xff0c;就是把笨重的PC电脑当成鼠标键盘来使用。 这应该是一个挺小众的应用&#xff0c;但有时感觉也应该算比较好玩吧&#xff0c; 毕竟实现一种一般人都感觉…

中值定理j

f ( n ) ( ξ ) 0 f^{(n)}(\xi)0 f(n)(ξ)0

MATLAB编译器配置:MinGW

使用 MATLAB 2022b版本&#xff0c;查询编译器时如上&#xff0c;想安装个MinGW编译器&#xff0c;自带的附加资源管理不好使&#xff0c;只能换个别的法子&#xff0c;经过一些参考&#xff0c;总结如下。 步骤1.在这里下载一个MinGW.最新版本是10.3.0.然后默认安装&#xff…

获取源数据推送到Kafka

打开BigData-KongGuan项目 打开BigData-KongGuan项目&#xff0c;在上一个任务&#xff08;“用户登录”&#xff09;的基础上继续完成本阶段任务。初始化加载SpringBoot项目的代码所在位置src/main/java/com/qrsoft/BigDataKongGuanApplication.java &#xff0c;代码如下&am…

Flutter:构建美观应用的跨平台方案

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Redis:ClassCastException【bug】

Redis&#xff1a;ClassCastException【bug】 前言版权Redis&#xff1a;ClassCastException【bug】错误产生相关资源控制器&#xff1a;UserController("/user")配置&#xff1a;RedisConfiguration实体类&#xff1a;User数据表&#xff1a;User 解决 最后 前言 2…

ElasticSearch之通过update_by_query和_reindex重建索引

写在前面 当我们索引的mapping&#xff0c;setting发生变更时&#xff0c;我们需要重建索引来使得这些变更生效。es提供了两种方式来完成重建索引的操作&#xff1a; 1:update by query,在本索引重建 2&#xff1a;reindex&#xff0c;在新索引上重建我们通过具体实例来分别看…

SSM SpringBoot vue智能手机参数分析平台

SSM SpringBoot vue智能手机参数分析平台 系统功能 首页 图片轮播 新闻资讯 手机信息 手机百科 登录注册 个人中心 后台管理 登录注册 个人中心 手机百科管理 用户管理 手机对比管理 配置管理 新闻资讯管理 手机信息管理 对比信息管理 我的收藏管理 开发环境和技术 开发语言…

Node.js基础+原型链污染

Node.js基础 概述&#xff1a;简单来说Node.js就是运行在服务端的JavaScript&#xff0c;Node.js是一个基于Chrome JavaScript运行时建立的一个平台 大小写变换&#xff1a; toUpperCase&#xff08;&#xff09;&#xff1a;将小写字母转为大写字母&#xff0c;如果是其他字…

【iOS ARKit】PhysicsBodyComponent

在学习完 RealityKit 进行物理模拟的相关理论知识后&#xff0c;下面通过使用 PhysicsBodyComponent 组件进行物理模拟演示&#xff0c;主要代码如下所示&#xff0c;稍后对代码进行详细解析。 // // PhysicsBodyView.swift // ARKitDeamo // // Created by zhaoquan du on…

禁止ie自动跳转edge

因为微软对ie已经彻底停止维护了&#xff0c;对于没有升级系统的用户来说&#xff0c;会自动更新edge然后将ie给禁止使用。下面方法有效的解决windows10下&#xff0c;禁止ie自动跳转edge。 方法一&#xff1a;对于2023年10月份前的更新可用 打开控制面板&#xff0c;点击网络…

一个能够自我游戏的贪吃蛇(pygame与搜索算法)

贪吃蛇小游戏再经典不过了&#xff0c;作为编程爱好者&#xff0c;代码编译的贪吃蛇&#xff0c;又能有怎样的成绩呢&#xff1f; 带着好奇&#xff0c;开始&#xff01; 先做一个普通的贪吃蛇游戏 引入相关package import pygame 定义相关配置变量 # 定义字体 font pyg…

Java 根据IP获取IP地址信息(离线)

<!-- https://mvnrepository.com/artifact/org.lionsoul/ip2region --><dependency><groupId>org.lionsoul</groupId><artifactId>ip2region</artifactId><version>2.7.0</version></dependency> 地址&#xff1a;http…

DBA面试题:MySQL缓存池LRU算法做了哪些改进?

下图是MySQL&#xff08;MySQL5.7版本&#xff09;体系架构图 MySQL的InnoDb Buffer Pool 缓冲池是主内存中的一个区域&#xff0c;用来缓存InnoDB在访问表和索引时的数据。对于频繁使用的数据可以直接从内存中访问&#xff0c;从而加快处理速度。如果一台服务器专用作MySQL数据…

逻辑数据平台的 NoETL 之道(内含QA)

作者简介&#xff1a; 余俊&#xff0c;Aloudata 合伙人 & 技术副总裁。拥有 18 年互联网技术和大数据平台相关架构经验。作为主架构师及核心研发主导并完成了 Alibaba B2B 首个海量分布式 KV 存储系统&#xff0c;作为网站架构师负责 Aliexpress 全球买全球卖交易系统的第…