【微信小程序入门到精通】— 轮播图你会了么?快速拿下 swiper 和 swiper-item
2023-04-18 14:25:21 时间
前言
对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢?
为此我特意开设此专栏,在我学习的同时也将其分享给大家!
本篇文章主要介绍我们微信小程序常用的视图容器类组件,对于 swiper 和 swiper-item 我们将逐一讲解。
如果在往下阅读的过程中,有什么错误的地方,期待大家的指点!
一、轮播图介绍
轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片,这些图片统称为轮播图。
二、swiper 和 swiper-item 介绍
我们的 swiper 和 swiper-item 组件是用来干什么的呢?接下来我来总结一下
- swiper 是我们的轮播图的外框架(容器)
- swiper-item 组件用于放入我们轮播图的内容物
话不多说,接下来我们动手操作一下!
2.1 构建轮播图结构(.wxml)
-
打开 list.wxml,构建轮播图框架
<swiper class="swiper-container" > <!-- 第一个轮播图 --> <swiper-item class="item"> <view>A</view> </swiper-item> <!-- 第二个轮播图 --> <swiper-item class="item"> <view>B</view> </swiper-item> <!-- 第三个轮播图 --> <swiper-item class="item"> <view>C</view> </swiper-item> </swiper>
-
我们可以鼠标左键按住我们的A字样往右拖动,我们可以发现轮播效果已经实现
2.2 样式设置(.wxss)
-
接下来我们在 list.wxss 里面设置样式
.swiper-container{ height: 150px; } .item{ height: 100%; line-height: 150px; text-align: center; } swiper-item:nth-child(1).item{ background-color: yellow; } swiper-item:nth-child(2).item{ background-color: red; } swiper-item:nth-child(3).item{ background-color: gold; }
首先我们设置 swiper样式的设置,我们前面命名swiper容器为swiper-container,在wxss里面直接使用.swiper-container设置高度,然后我们前面设置了swiper-item名称为item,利用.item设置item的的高度和文字高度以及文本位置,最后我们设置轮播图内容的背景颜色
-
样式展示
总结
相遇即是缘分,期待与您一起进步,不断成长!
相关文章
- 一个Java程序员对2011年的回顾
- 大数据发展历程
- Android高级进阶之路【一】Android中View绘制流程浅析
- 可信服务管理(Trusted Service Manager)介绍
- GIS应用|快速开发REST空间分析服务
- 未来十年微软长盛不衰的两项战略
- 领域驱动设计模式的收益与挑战
- cocos 3.0 一键打包android平台应该注意的细节
- 数智化时代,驱动企业转型升级的“三驾马车”是什么?
- 基于MINA构建高性能的NIO应用
- 使用Rainbond实现离线环境软件交付
- 工作流引擎 jBPM 5.2 发布
- 微信小程序Minium自动化测试(三)
- 桌面应用抢先体验,这次有点料!
- 甲骨文Java专利遭拒 起诉Android侵权受挫
- 云计算的应用领域及发展前景
- Java效率真的很低吗?Android为何要采用?
- Android高级进阶之路【二】十分钟彻底弄明白 View 事件分发机制
- 庖丁解牛之-Android平台RTSP|RTMP播放器设计
- 手机直付,超级方便