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

相关推荐
拾光拾趣录2 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权2 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598243 分钟前
vue3源码解析:调度器
前端·vue.js
一一一87113 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚26 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件28 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript