小程序轮播图实现,swiper插件轮播图
[小程序]查看视图，旋转转盘，滚动查看幻灯片列表(在线详细手册)_技术博客of _wx62affbc457373 _博客
博客明星评选
@ toc
简介欢迎来到
魔法屋！
这篇文章包含专栏。
-2022小程序开发从入门到精通-
列内容
——文章《小程序——启航篇》开启任督二脉——
本书联系文章【小程序-启航篇】，阐述了任督二脉小程序的主机环境构成。上面已经介绍了宿主环境的通信方式和运行机制，本文重点介绍宿主环境的视图容器和基本内容组件。
宿主环境——组件小程序中的组件由宿主环境提供，开发者可以基于组件快速构建漂亮的页面结构。官方小程序的组件分为9类，即：
视图容器基本内容表单组件导航组件媒体组件
地图地图组件
画布画布组件
开放能力
可访问视图容器组件视图组件介绍：
公共视图区域(静态)类似于HTML的div标签，是页面布局效果常用的块元素。
使用如图所示的基本水平布局：
！-结构-
视角
查看A/视图
视图B/视图
视图C/视图
/查看
-我是一条分界线-
/*样式*/。容器{
显示器：flex
justify-content:space-around；
}。容器视图{
宽度：100px
高度：100px
文本对齐：居中；
行高：100px
}
/* css3语法*/。容器视图：第n个子代(1) {
背景色：浅珊瑚色；
}。容器视图：第n个子代(2) {
背景色：淡青色；
}。容器视图：第n个子代(3) {
背景色：lightgoldenrodyellow
}介绍}滚动查看：
可滚动视图区(动态)常用来实现列表滚动效果和垂直滚动效果。
注意：滑动效果中整个区域的高度应该小于滑动视图区域的总高度，scroll-y应该添加到scroll-view组件中。
！-结构-
滚动视图滚动y
查看A/视图
视图B/视图
视图C/视图
/滚动视图
-我是一条分界线-
/*样式*/。容器{
高度：150px
边框：3px纯黑；
}。容器视图{
宽度：100px
高度：100px
文本对齐：居中；
行高：100px
}
/* css3语法*/。容器视图：第n个子代(1) {
背景色：浅珊瑚色；
}。容器视图：第n个子代(2) {
背景色：淡青色；
}。容器视图：第n个子代(3) {
背景色：lightgoldenrodyellow
}水平滚动效果的实现
注意：还需要在scroll-view组件中添加scroll-x，最重要的是在style设置中添加white-space: nowrap 设置为不自动换行，把后面部分放到区域之外。
效果：
代码：-结构-
滚动视图滚动x
查看A/视图
视图B/视图
视图C/视图
/滚动视图
-我是分离者-
/*样式*/。容器{
宽度：100%；
空白：nowrap
}。容器视图{
显示：内嵌-块；
宽度：100%；
身高：300rpx
文本对齐：居中；
行高：300rpx
}
/* css3语法*/。容器视图：第n个子代(1) {
背景色：浅珊瑚色；
}。容器视图：第n个子代(2) {
背景色：淡青色；
}。容器视图：第n个子代(3) {
背景色：lightgoldenrodyellow
} Swiper和swiper-item简介：
旋转式容器组件和旋转式项目组件
您可以向swiper组件添加一个选项。
指示器-点：是否显示面板显示点指示器-颜色：未选中面板点颜色指示器-活动-颜色：选中面板点颜色自动播放：自动播放循环：收敛滑动时长：滑动间隔间隔：自动切换时间，即停留时间代码：
！-结构-
滑动指示器-圆点循环持续时间=500 间隔=1000 指示器-颜色=白色指示器-活动-颜色=浅蓝色自动播放
swiper-item A /swiper-item
swiper-项目B/swiper-项目
swiper-item C /swiper-item
/swiper
-我是分界线-
/*样式*/。容器{
宽度：100%；
}。集装箱swiper-项目{
显示：内嵌-块；
宽度：100%；
身高：300rpx
文本对齐：居中；
行高：300rpx
}
/* css3语法*/。容器swiper-item:n-child(1){
背景色：浅珊瑚色；
}。容器swiper-item:n-child(2){
背景色：淡青色；
}。集装箱swiper-item:n-child(3){
背景色：lightgoldenrodyellow
}基本内容组件文本介绍：
文本类似于HTML的span标记可以通过向文本组件添加user-select来选择。
富文本富文本标签简介：
HTML可以通过nodes节点渲染到UI结构。
感谢您的阅读，您的赞和收藏是我创作的最大动力！
电脑魔术师原创作品，
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。