小程序组件 —— 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 中的一部分属性功能,具体更详细的功能,可以前往官方文档进行学习;

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

相关推荐
上趣工作室13 分钟前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习2 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
韩仔搭建3 小时前
美乐迪电玩大厅加载机制与 RoomList 配置结构分析
游戏·小程序·开源·lua
WKK_5 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码1 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 天前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J1 天前
管理100个小程序-很难吗
android·小程序
qq_357389631 天前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计2 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技2 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序