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

相关推荐
sdgsdgdsgc15 分钟前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生98415 分钟前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
心止水j17 分钟前
spark
javascript·数据库·spark
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
2501_915909064 小时前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端