小程序21-绘制轮播图

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

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

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

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

swiper 常用属性

  1. autoplay:是否自动切换
  2. circular:是否采用衔接滑动(1-2-3-1)
  3. interval:自动切换时间间隔
  4. indicator-dots:是否显示面板指示点
  5. indicator-color:指示点颜色
  6. 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 中相同的选择器

相关推荐
慧一居士3 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead5 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js