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

在我还没接触到微信小程序之前,通常使用轮播要么手写或使用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-dots    boolean    false    是否显示面板指示点
indicator-color    color    rgba(0, 0, 0,.3)    指示点颜色
indicator-active-color    color    false    当前选中的指示点颜色
autoplay    boolean    false    是否自动切换
interval    number    5000    自动切换时间间隔
circular    boolean    false    是否采用衔接滑动
<!-- 属性 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.mzph.cn/bicheng/29682.shtml

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

相关文章

分布式技术导论 — 探索分析从起源到现今的巅峰之旅(流式处理到微批处理)

探索分析从起源到现今的巅峰之旅 流式计算回顾流式服务结合分布式特性 流式计算组成部分监控数据处理进度流式分析案例流转数据的衍生存储确认器采取高效策略确认器异常应对策略工作节点故障的处理&#xff08;精确一次处理&#xff09;确认器故障的处理&#xff08;恰好一次处…

新人学习笔记之(数据类型(整数))

一、整数的数据类型分为&#xff1a;short、int、long、long long #include<stdio.h>int main() {// 1. 定义short、int、long、longlong四种数据类型// 格式&#xff1a;数据类型 变量名 数据值// short 短整型 windows 2个字节 &#xff08;-32768 ~ 32767&#xff0…

Spring Cloud Gateway 概述与基本配置(下)

在上篇文章中&#xff0c;我们介绍了 Spring Cloud Gateway 的基本概念和配置方法。在这篇文章中&#xff0c;我们将进一步探讨 Spring Cloud Gateway 的进阶配置和高级功能&#xff0c;包括更多内置过滤器、自定义断言工厂、集成 Eureka 以及如何创建自定义过滤器&#xff0c;…

【PPT教程】一键重置幻灯片背景的方法,新建幻灯片带默认背景

目的是替换18届的研电赛ppt背景为19届 这里写目录标题 1.设计->设置背景格式2.图片或纹理填充->插入3.选择需要替换为背景的照片4.点击下方的应用到全部 1.设计->设置背景格式 2.图片或纹理填充->插入 3.选择需要替换为背景的照片 4.点击下方的应用到全部 此时全部…

Google推出开源代码大模型CodeGemma:AI编程新纪元,代码自动完成和生成技术再升级

论文标题: CodeGemma: Open Code Models Based on Gemma机构: Google LLC论文链接: https://arxiv.org/pdf/2406.11409.pdf CodeGemma模型概述 CodeGemma是基于Google DeepMind的Gemma模型系列&#xff08;Gemma Team et al., 2024&#xff09;开发的一系列开放代码模型。这些…

Flutter - Material3适配

demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新&#xff0c;请前往github查看最新代码 Flutter - Material3适配 对比图具体实现一些组件的变化 代码实现Material2的ThemeDataMaterial3的ThemeData Material3适配官方文档 flutter SDK升级到3.16.0之后 …

exports和module.exports使用误区

在Node.js中&#xff0c;exports和module.exports是用于从模块中导出功能的关键概念。然而&#xff0c;它们之间存在一些常见的使用误区&#xff0c;以下是对这些误区的详细解释&#xff1a; 误区一&#xff1a;exports和module.exports没有区别 事实&#xff1a;虽然exports…

AI在线免费视频工具2:视频配声音

1、视频配声音 https://deepmind.google/discover/blog/generating-audio-for-video/ https://www.videotosoundeffects.com/ &#xff08;免费在线使用&#xff09;

企业内网是如何禁用U盘的?电脑禁用U盘有哪些方法?

在当今企业环境中&#xff0c;数据安全和信息保护至关重要。 为了防止数据泄露和恶意软件传播&#xff0c;很多企业选择在内网中禁用U盘&#xff0c;以控制数据的物理传输。 小编这就来给大家总结一份详细指南&#xff01;&#xff01; 关于企业内网如何禁用U盘的指南&#x…

mysql分析常用锁

这里写自定义目录标题 1.未提交事物&#xff0c;阻塞DDL&#xff0c;继而阻塞所有同表的后续操作,查看未提交事务的进程2.存着正在进行的线程数据。3.根据processlist表中的id杀掉未释放的线程4.查看正在使用的表5.mysql为什么state会有waiting for handler commit6.什么情况导…

【Spring Cloud应用框架】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

异步爬虫:aiohttp 异步请求库使用:

使用requests 请求库虽然可以完成爬虫业务&#xff0c;但是对于异步任务来说&#xff0c;它是做不到的&#xff0c; 这时候我们需要借助 aiohttp 异步请求库来完成异步爬虫的编写&#xff1a; 话不多说&#xff0c;直接看示例&#xff1a; 注意&#xff1a;楼主使用的python版…

还在为找不到工作发愁?来看看嵌入式行业

嵌入式系统的就业方向非常广泛&#xff0c;涵盖了许多不同的行业和领域。以下是一些常见的嵌入式系统就业方向&#xff1a; 消费电子产品&#xff1a;这包括智能手机、平板电脑、智能电视、智能家居设备等。嵌入式系统工程师可以参与设计、开发和测试这些产品的硬件和软件。 汽…

电脑有线无线一起用怎么设置

要在电脑上同时使用有线和无线网络&#xff0c;可以通过以下几种方法进行设置&#xff1a; 调整网络高级设置&#xff1a; 进入“网络和共享中心”。点击“更改适配器设置”。按键盘Alt键调出菜单栏&#xff0c;然后点击“高级→高级设置”。在“适配器和绑定”标签页下可以对可…

mysql-线上常用运维sql-2

在MySQL中&#xff0c;直接查询当前正在执行的事务可能不是非常直观&#xff0c;因为MySQL并没有提供直接的命令或系统视图来列出所有正在运行的事务。但是&#xff0c;你可以通过几种方法间接地获取这些信息。 1. **查看进程列表** 使用SHOW PROCESSLIST;或SHOW FULL PROCESSL…

触发器的结构

1、修改分隔符符号 delimiter $$ 可以修改成$$//都行 2、创建触发器函数名称 create trigger格式的函数名 3、什么样的触发&#xff0c;操作那个表 after&#xff1a;......之后触发 before&#xff1a;........之前触发 insert&#xff1a;插入被触发 update&#xff1a;修改…

超简洁的待办事项自托管便签todo

什么是todo todo 是一个自托管的 todo web 应用程序&#xff0c;可让您以简单且最少的方式跟踪您的 todo。 搭建 使用Docker命令行方式进行搭建 docker run -d -p 8000:8000 -v todo_db:/usr/local/go/src/todo/todo.db prologic/todo Docker-compose.yml version: 3 ​ se…

工程项目全生命周期管理系统企智汇一站式解决方案!

在当今竞争激烈的工程行业&#xff0c;实现工程项目的全生命周期管理已成为企业提升效率、降低成本、确保质量并赢得市场竞争的关键。企智汇的工程项目管理系统解决方案致力于助力工程企业实现全面、精细化的项目全生命周期管理&#xff0c;确保从项目启动到竣工交付的每一个环…

微信小程序 - 出于性能原因,对长行跳过令牌化。长行的长度可通过 “editor.maxTokenizationLineLength” 进行配置

问题描述 出于性能原因&#xff0c;对长行跳过令牌化。长行的长度可通过 “editor.maxTokenizationLineLength” 进行配置。 解决方案 设置 - 编辑器设置 - 更多编辑器设置... 搜索&#xff1a;maxtoken&#xff0c;原来是 20000&#xff0c;我改成了 200000 即可~

NVIDIA Jetson AI边缘计算盒子

这里写自定义目录标题 烧录系统安装Jetpack安装cuda安装Pytorch安装onnxruntime安装qv4l2 烧录系统 选择一台Linux系统&#xff0c;或者VMware的电脑作为主机&#xff0c;烧录系统和后面安装Jetpack都会用到。 根据供应商的指令烧录的&#xff0c;暂时还没验证官方烧录&#x…