小程序组件 —— 22 组件案例 - 轮播区域绘制

这一节我们实现轮播图最外层的盒子,也就是把轮播图的最外层搭好,先不给轮播图添加图片,因为图片属于新的组件,组件里面有一些知识点,需要单独分开讲;

回顾一下,在进行传统网页开发时,实现轮播图的时候,我们首先使用 html、css 实现轮播图的结构样式,然后使用 JS 控制轮播图的效果,或者直接使用插件实现轮播图的功能,而在小程序中实现小程序功能则相对简单很多;

在小程序中,如果想实现轮播图,只需要两个组件:swiperswiper-item

  • swiper:滑块视图容器,可以简单理解为轮播图最外层的容器,是轮播图的盒子,swiper 中不能放置其它任何内容,只能放置 swiper-item 组件,如果放置了其它内容,内容是不会进行展示的;
  • swiper-item:只可放置在 swiper 组件中,宽高自动设置为 100%,也就是占满 swiper 这个容器的宽和高,代表 swiper 中的每一项,也就是每一张轮播图;

下面打开微信开发者工具,实现轮播图最外层的结构:

  • 切换到首页目录,打开 index.wxml 文件,在轮播图区域中实现轮播图的结构,在最外层写一个 swiper,swiper 是轮播图最外层的盒子,注意在 swiper 内部只能设置 swiper-item,在 swiper-item 中编写内容才能在页面上正常显示编写的内容;我们需要三张轮播图,所以需要三个 swiper-item,其代码如下:

    typescript 复制代码
    <view class="swiper">
      <swiper>
        <swiper-item>
          1
        </swiper-item>
        <swiper-item>
          2
        </swiper-item>
        <swiper-item>
          3
        </swiper-item>
      </swiper>
    </view>

    通过上面的代码就已经把轮播图的结构写好了,我们可以到模拟器中滑动界面观察轮播图的效果:

  • 由于我们还没有编写 css 样式,所以目前轮播图的效果还不是很明显,下面我们来添加一些样式,我们打开 index.scss 文件,添加对应的样式代码如下:

    css 复制代码
    // 轮播图区域样式
    .swiper {
      swiper {
        height: 360rpx;
        background-color: skyblue;
    
        swiper-item{
          // & 在 Sass 中代表的是父选择器,引用的意思
          // swiper-item:first-child 表示取父选择器的第一个 swiper-item
          // swiper-item:last-child 表示取父选择器的最后一个 swiper-item
          &:first-child{
            background-color: lightsalmon;
          }
          &:last-child{
            background-color: lightseagreen;
          }
        }
      }
    }

    这里为了区分不同的 swiper-item,使用伪类选择器来设置不同 swiper-item 的背景颜色,具体效果如下:

  • 目前轮播图是不能够自动播放的,需要通过手动进行滑动,如果想轮播图自己播放,需要给 swiper 添加一个 autoplay 属性 ,这个属性接收一个布尔值作为参数,我们设置为 true,即可实现自动播放效果:

    如果一个属性的值是布尔值,属性值可以不写,不写表示其值为 true,这样我们同样可以实现自动播放效果,如下:

  • 设置了自动切换之后,可以继续设置切换间隔时长,我们可以在 swiper 中使用 interval 属性设置切换间隔,这里我们设置为间隔 1s 进行切换,如下:
  • 设置自动切换、切换时长后,我们可以继续对轮播图添加其它属性,比如指示当前是第几场轮播图的选点功能,我们可以在 swiper 中添加一个 indicator-dots 属性,其属性值是布尔值,因此我们可以不填属性值,默认为 true,具体如下所示:
  • 如果感觉选点不符合样式需求,可以根据实际情况进行修改,比如可以使用 indicator-color 属性修改选点的颜色,如下:
  • 上面被激活的选点的颜色为黑色,如果我们觉得不好看,可以在 swiper 中使用 indicator-active-color 属性来调整激活后选点的颜色:
  • 目前轮播图到第三张图片之后,会往前切换到第一张,当我们希望轮播图往后切换到第一张的时候,这个时候我们可以加另外一个 circular 属性,其属性值为布尔值,所以我们可以不写属性值,默认为 true,如下所示:

上面只讲了 swiper 中的一部分属性功能,具体更详细的功能,可以前往官方文档进行学习;

参考视频:尚硅谷微信小程序开发教程

相关推荐
2501_9160074716 分钟前
iOS 混淆与团队协作,研发、安全、运维、测试如何在加固流程中高效配合(iOS 混淆、ipa 加固、协作治理)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008896 小时前
iOS 不上架怎么安装?多种应用分发方式解析,ipa 文件安装、企业签名、Ad Hoc 与 TestFlight 实战经验
android·macos·ios·小程序·uni-app·cocoa·iphone
CRMEB定制开发9 小时前
PHP多商户接入阿里云识图找商品
android·阿里云·小程序·php·商城系统·微信商城·crmeb
00后程序员张9 小时前
iOS App 混淆实战,在源码不可用情况下的成品加固与测试流程
android·ios·小程序·https·uni-app·iphone·webview
说私域11 小时前
基于开源AI智能名片与链动2+1模式的S2B2C商城小程序研究:构建“信息找人”式精准零售新范式
人工智能·小程序·开源
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
说私域12 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序在公益课裂变法中的应用与影响研究
人工智能·小程序
Tartly12 小时前
掌中智汇,运筹帷幄 - 全新ASUS华硕智汇商擎小程序上线
小程序
私人珍藏库12 小时前
[吾爱大神原创] wx小程序自动解包工具界面版1.0.0
小程序
2501_9160137413 小时前
iOS 26 设备文件管理实战指南,文件访问、沙盒导出、系统变更与 uni-app 项目适配
android·ios·小程序·uni-app·cocoa·iphone·webview