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

微信小程序组件之swiper介绍

在小程序中,有swiper和swiper-item组件实现轮播图。

swiper:滑块视图容器,其中只能放置swiper-item组件

swiper-item:只能放在swiper组件中,宽高自动设置为100%, 代表swiper中的每一项。

主要属性的介绍通过代码示例进行讲解:

<view class="swiper">
  <swiper autoplay="true" interval="5000" indicator-dots indicator-color="#efefef" indicator-active-color="#339dff" circular="true">
    <swiper-item>
    <image src="../../assets/sw1.png" mode="scaleToFill"/>
    </swiper-item>
    <swiper-item><image src="../../assets/sw2.png" mode="scaleToFill"/>
    </swiper-item>
  </swiper>
</view>

swiper中的属性:

autoplay:轮播图是否自动播放;

interval:轮播图多久切换一次,单位是毫秒,例如5000表示5秒切换一次;

Indicator-dots:轮播图面板指示点是否显示;

indicator-color:默认指示点颜色;

indicator-active-color:当前图片的指示点颜色;

circular:是否采用衔接滑动。

.swiper {
  swiper {
    height: 360rpx;
   
    swiper-item {
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}


http://www.kler.cn/a/400134.html

相关文章:

  • Java连接MySQL(测试build path功能)
  • 微知-DOCA ARGP参数模块的相关接口和用法(config单元、params单元,argp pipe line,回调)
  • Quartus+Nios II for eclipse问题合集
  • 如何在MindMaster思维导图中制作PPT课件?
  • 学习threejs,使用AnimationMixer实现变形动画
  • JavaWeb——JS、Vue
  • GeeRPC第一天 服务端与消息编码(1)
  • JAVA学习-练习试用Java实现“判断星期的英文缩写”
  • 汽车资讯新篇章:Spring Boot技术启航
  • 241118学习日志——[CSDIY] [ByteDance] 后端训练营 [06]
  • 除了电商平台,还有哪些网站适合进行数据爬取?
  • spring web项目中常用的注解
  • 语义通信论文略读(十四)线性编码和传输的优化+边缘服务器执行CV任务
  • C 语言 【单链表】
  • 探索DDCA:深入理解内存架构、子系统与内存控制器
  • Python设计模式详解之2 —— 工厂模式
  • 多模块集成swagger(knife4j-spring-boot-starter)
  • C++ ──── set和map的模拟实现
  • 探索IDE的无限可能:使用技巧与插件推荐
  • 【人工智能】生成对抗网络(GAN)原理与Python实现:从零构建图像生成模型
  • Spark RDD、DStream、DataFrame、DataSet 在窗口操作上的区别
  • 国内镜像android studio
  • 请描述一下JVM(Java虚拟机)的生命周期及其对应用程序性能的影响
  • 如何加速conda、docker资源下载速度
  • 开源模型应用落地-qwen模型小试-Qwen2.5-7B-Instruct-tool usage入门-Qwen-Agent深入学习(四)
  • sglang 部署Qwen2VL7B,大模型部署,速度测试,深度学习