小程序21-绘制轮播图

Mr.Liu62024-11-17 13:56

在小程序中，提供了 swiper 和 swiper-item 组件实现轮播图

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

swiper- item：只可放置在 swiper 组件中，宽高自动设置为100%，代表 swiper 中的每一项

文档所在位置：wswiper文档链接

swiper 常用属性

autoplay：是否自动切换
circular：是否采用衔接滑动（1-2-3-1）
interval：自动切换时间间隔
indicator-dots：是否显示面板指示点
indicator-color：指示点颜色
indicator-active-color：当前选中的指示点颜色

图1: vxml文件内容-可直接复制，图2: scss文件内容-可直接复制

html 复制代码

<!-- 轮播图区域 -->
<view class="swiper">
  <swiper 
    autoplay
    circular
    interval="1000"
    indicator-dots
    indicator-color="#fff"
    indicator-active-color="#f3514f">
    <swiper-item>
      1
    </swiper-item>
    <swiper-item>
      2
    </swiper-item>
    <swiper-item>
      3
    </swiper-item>
  </swiper>
</view>

css 复制代码

// 轮播图区域样式
.swiper {
  swiper {
    height: 360rpx;
    background-color: skyblue;
    text-align: center;

    swiper-item {
      // & 在 Sass 中代表的是父选择器
      // swiper- item：first-child 选中第一个子元素
      line-height: 360rpx;
      &:first-child {
        background-color: lightcoral;
      }
      &:last-child {
        background-color: lightgreen;
      }
    }
  }
}

扩展

全局样式：在 app.wxss 定义的样式规则，作用于每一个页面，例如：设置字号、背景色等

局部样式：在 page.wxss 定义的样式规则，仅作用于对应页面，并会覆盖 app.wxss 中相同的选择器