目录 前言一、轮播图介绍二、swiper 和 swiper-item 介绍2.1 构建轮播图结构(.wxml)2.2 样式设置(.wxss) 总结 前言 对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握
对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢?
为此我特意开设此专栏,在我学习的同时也将其分享给大家!
本篇文章主要介绍我们微信小程序常用的视图容器类组件,对于 swiper 和 swiper-item 我们将逐一讲解。
如果在往下阅读的过程中,有什么错误的地方,期待大家的指点!
轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片,这些图片统称为轮播图。
我们的 swiper 和 swiper-item 组件是用来干什么的呢?接下来我来总结一下
话不多说,接下来我们动手操作一下!
打开 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字样往右拖动,我们可以发现轮播效果已经实现
接下来我们在 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的的高度和文字高度以及文本位置,最后我们设置轮播图内容的背景颜色
样式展示
相遇即是缘分,期待与您一起进步,不断成长!
来源地址:https://blog.csdn.net/fsadagds/article/details/126868845
--结束END--
本文标题: 【微信小程序入门到精通】— 轮播图你会了么?快速拿下 swiper 和 swiper-item
本文链接: https://www.lsjlt.com/news/378819.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-23
2024-05-23
2024-05-23
2024-05-23
2024-05-23
2024-05-23
2024-05-23
2024-05-23
2024-05-23
2024-05-23
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模 安全指南 Osprey 游戏分析 游戏调试 游戏图形 游戏物理 开源库 魔方破解 游戏安全
0