免费网站开发合同范本,黔东南企业网站建设,重庆做营销网站,传奇公益服文章目录 一、轮播组件#xff08;一#xff09;swiper组件1、功能描述2、属性说明 #xff08;二#xff09;swiper-item组件1、功能描述2、属性说明 #xff08;三#xff09;轮播组件使用基本语法 二、案例演示#xff08;一#xff09;运行效果#xff08;二… 文章目录 一、轮播组件一swiper组件1、功能描述2、属性说明 二swiper-item组件1、功能描述2、属性说明 三轮播组件使用基本语法 二、案例演示一运行效果二实现步骤1、创建小程序项目2、准备图片素材3、编写轮播图页面内容4、轮播图页面样式5、启动PC端自动真机测试6、实现自动循环轮播 一、轮播组件
swiper组件表示滑块视图容器用于创建一块可以滑动的区域。swiper组件内部需要嵌套swiper-item组件swiper-item组件表示滑块视图内容。swiper组件的默认高度为150px默认宽度为100%。swiper-item组件的初始高度和初始宽度都为100%。
一swiper组件
1、功能描述
滑块视图容器。其中只可放置swiper-item组件否则会导致未定义的行为。
2、属性说明
属性类型默认值必填说明最低版本indicator-dotsbooleanfalse否是否显示面板指示点1.0.0indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0indicator-active-colorcolor#000000否当前选中的指示点颜色 1.1.0autoplaybooleanfalse否是否自动切换1.0.0currentnumber当前所在滑块的index默认为01.0.0intervalnumber5000否自动切换时间间隔1.0.0circularbooleanfalse否是否采用衔接滑动1.0.0
二swiper-item组件
1、功能描述
仅可放置在swiper组件中宽高自动设置为100%。
2、属性说明
属性类型默认值必填说明最低版本item-idstring否该 swiper-item 的标识符1.9.0skip-hidden-item-layoutbooleanfalse否是否跳过未显示的滑块布局设为 true 可优化复杂情况下的滑动性能但会丢失隐藏状态滑块的布局信息1.9.0
三轮播组件使用基本语法
swiper组件通过swiper标签定义swiper-item组件通过swiper-item标签定义。
swiperswiper-item1/swiper-itemswiper-item2/swiper-itemswiper-item3/swiper-item
/swiperswiper组件为外层容器内层有3个swiper-item组件表示当前滑块视图内容一共有3项。滑块视图内容在初始状态下只显示第1项向左滑动显示第2项再向右滑动可以返回第1项。
二、案例演示
一运行效果
三张图片手动轮播 三张图片自动循环轮播
二实现步骤
1、创建小程序项目
项目名称实现轮播图模板选择不使用模板 单击【确定】按钮
2、准备图片素材
在项目根目录里创建images目录拷贝三张图片
3、编写轮播图页面内容
修改index.wxml文件
!--index.wxml--
navigation-bar titleWeixin back{{false}} colorblack background#FFF/navigation-bar
!--轮播图的结构--
swiper classswiper-container indicator-dotstrue!--第一个轮播图--swiper-itemview classitemimage src/images/spark.png modescaleToFill stylewidth: 100%; height: 100%; //view/swiper-item!--第二个轮播图--swiper-itemview classitemimage src/images/mysql.png modescaleToFill stylewidth: 100%; height: 100%; //view/swiper-item!--第三个轮播图--swiper-itemview classitemimage src/images/scala.png modescaleToFill stylewidth: 100%; height: 100%; //view/swiper-item
/swiper4、轮播图页面样式
修改index.wxss文件
/**index.wxss**/
.swiper-container {height: 150px;
}.item {height: 100%;width: 100%;
}5、启动PC端自动真机测试
三张图片手动轮播
6、实现自动循环轮播
修改index.wxml文件给轮播图组件添加属性 启动PC端自动真机测试查看效果 读者试一试设置指示点颜色为黄色当前选中指示点颜色为红色
