微信小程序-swiper轮播图

最新推荐文章于 2024-08-21 17:47:57 发布

chibimarukochan

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量627

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/ChibiMarukoChan/article/details/83745258

版权

本文介绍了如何在微信小程序中使用swiper组件创建轮播图，适用于首页展示。提供了index.wxml、index.wxss和index.js的基本代码示例，包括设置图片地址、指示点显示、自动切换和切换时间。建议查阅官方文档以获取更多swiper组件的详细属性。

摘要由CSDN通过智能技术生成

效果：

一般用于首页的展示页面

直接附上代码：在index.wxml

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{
  {indicatorDots}}" autoplay="{
  {autoplay}}" circular="{
  {circular}}" vertical="{
  {vertical}}"
        interval="{
  {interval}}" duration="{
  {duration}}" previous-margin="{
  {previousMargin}}px" next-margin="{
  {nextMargin}}px">
        <block wx:for="{
  {background}}" wx:key="*this">
          <swiper-item>
            <image src="{
  {item}}" cl