小程序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 中相同的选择器

相关推荐
yanlele12 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
The_era_achievs_hero44 分钟前
微信小程序71~80
微信小程序·小程序
中微子1 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app