【微信小程序】swiper和swiper-item组件的基本使用
【微信小程序】swiper和swiper-item组件的基本使用
honker707
于2022-10-01 18:06:16发布
1571
收藏
58
分类专栏：
微信小程序
文章标签：
微信小程序
swiper
swiper-item
原力计划
微信小程序
专栏收录该内容
13 篇文章
21 订阅
订阅专栏
✅作者简介：CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆 📃个人主页：hacker707的csdn博客 🔥系列专栏：微信小程序 💬个人格言：不断的翻越一座又一座的高山，那样的人生才是我想要的。这一马平川，一眼见底的活，我不想要,我的人生，我自己书写，余生很长，请多关照，我的人生，敬请期待💖💖💖
swiper和swiper-item 实现轮播图效果swiper组件的常用属性结束语 实现轮播图效果list.wxml
<!--轮播图的结构--> <swiper class="swiper-container"> <!--第一个轮播图--> <swiper-item> <view class="item">A</view> </swiper-item> <!--第二个轮播图--> <swiper-item> <view class="item">B</view> </swiper-item> <!--第三个轮播图--> <swiper-item> <view class="item">C</view> </swiper-item> </swiper>list.wxss
/* 轮播图样式 */ .swiper-container{ height: 150px; } .item{ height: 100%; line-height: 150px; text-align: center; } swiper-item:nth-child(1) .item{ background-color: lightgreen; } swiper-item:nth-child(2) .item{ background-color: lightskyblue; } swiper-item:nth-child(3) .item{ background-color: lightpink; } swiper组件的常用属性 属性类型默认值说明indicator-dotsbooleanfalse是否显示面板提示点indictor-colorcolorrgba(0,0,0,3)指示点颜色indictor-active-colorcolor#000000当前选择的指示点颜色autoplaybooleanfalse是否自动切换intervalnumber5000自动切换时间间隔circularbooleanfalse是否采用衔接滑动✅显示指示点颜色
✅设置指示点颜色
✅设置当前选择的指示点颜色
✅设置1秒自动切换
✅设置衔接滑动
结束语以上就是微信小程序之swiper和swiper-item组件的基本使用 持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序 你们的支持就是hacker创作的动力💖💖💖