微信小程序 swiper组件构建轮播图的实例

更新时间：2017年09月20日 15:33:29 投稿：lqh

这篇文章主要介绍了微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论，需要的朋友可以参考下

微信小程序 swiper组件构建轮播图的实例

实现效果图：

wxml基础文件：

<view class="classname">
  <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red">
    <swiper-item><image src="/images/1.jpg"></image></swiper-item>
    <swiper-item><image src="/images/2.jpg"></image></swiper-item>
    <swiper-item><image src="/images/3.jpg"></image></swiper-item>
  </swiper> 
</view>

swiper-item仅可放置在组件中，宽高自动设置为100%。 
参数设置： 
autoplay 自动播放导致swiper变化； 
touch 用户划动引起swiper变化； 
indicator-dots true是否显示面板指示点圆圈； 
interval 自动切换时间间隔； 
duration 滑动动画时长; 
更多设置可以看官方文档组件！

wxss样式文件

swiper{
 width:100%;
 height:500rpx;
}
swiper image{
  width:100%;
 height:500rpx;
}

app.json文件入口

{
 "pages": [
  "pages/redirect/redirect"  
 ],
 "window": {
  "navigationBarBackgroundColor": "#405f80"
 }
}

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

requestAnimationFrame定时动画屏幕刷新率节流示例浅析
这篇文章主要为大家介绍了requestAnimationFrame定时动画屏幕刷新率节流示例浅析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
JS网页repaint与reflow 的区别及优化方式
这篇文章主要为大家介绍了JS网页repaint与reflow 的区别及优化方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
微信小程序 wx:key详细介绍
这篇文章主要介绍了微信小程序 wx:key详细介绍的相关资料,并附简单代码实例，帮助大家学习理解，需要的朋友可以参考下
2016-10-10
微信小程序页面传值实例分析
这篇文章主要介绍了微信小程序页面传值实例分析的相关资料,需要的朋友可以参考下
2017-04-04
微信小程序 MD5加密登录密码详解及实例代码
这篇文章主要介绍了微信小程序 MD5加密登录密码详解及实例代码的相关资料,这里附有实例代码，需要的朋友可以参考下
2017-01-01
JavaScript中5个常用的对象
JavaScript是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScript，因为它对做网页方面是有很大作用的。本篇内容小编就来详细解说JavaScript常用的对象,需要的朋友可以参考一下
2021-10-10
前端使用xlsx库导出带有样式的excel文件
这篇文章主要为大家介绍了前端使用xlsx库导出带有样式的excel文件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Three.js概述和基础知识学习
这篇文章主要为大家介绍了Three.js概述和基础知识学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
微信小程序本地缓存数据增删改查实例详解
这篇文章主要介绍了微信小程序本地缓存数据增删改查实例详解的相关资料,需要的朋友可以参考下
2017-05-05
带你彻底理解JavaScript中的原型对象
这篇文章主要介绍了带你彻底理解JavaScript中的原型对象,文中有详细的代码介绍,对正在学习js的小伙伴们有一定的帮助,需要的朋友可以参考下
2021-04-04