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

相关推荐
從南走到北1 小时前
智尚招聘求职小程序v1.0.23
微信小程序·小程序
fruge2 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician3 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
2501_915918415 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手5 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng6 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
千码君20167 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
2501_915909068 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
狂团商城小师妹8 小时前
智尚房产中介小程序
微信小程序·小程序
lijun_xiao20099 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端