微信小程序-- 标签及常见属性
demo.wxml
<!--
1 轮播图的外层容器 swiper
2 每一个轮播项 swiper-item
3 swiper 标签 存在默认样式
1 width 100%
2 height 150px image 存在默认宽度和高度 320 * 240 px
3 swiper 高度 无法实现由内容撑开
4 先找出来 原图的宽度和高度 等比例 给 swiper 定 宽度和高度
原图的宽度和高度 1125 * 352
swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
height: 100vm * 352 / 1125
5 autoplay 自动轮播
6 interval 修改轮播时间 单位ms 1s = 1000 ms
7 circular 衔接滑动
8 indicator-dots 显示 指示器 分页器 索引器
9 indicator-color 指示器未选中的颜色
10 indicator-active-color 指示器选中的颜色
-->
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
<swiper-item>
<image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/145/O1CN014Rpya31CwS0q0XCW6_!!145-0-lubanu.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/164/O1CN01uNtLXL1D59XP9MS7R_!!164-0-lubanu.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="//gw.alicdn.com/imgextra/i3/60/O1CN0150z1L71CJWLeepaU5_!!60-0-lubanu.jpg"></image> </swiper-item>
</swiper>
demo.wxss
swiper{
width: 100%;
height: calc(100vm * 352 / 1125);
}
image{
width: 100%;
}
示例
_Hello Spring
发布了139 篇原创文章 · 获赞 9 · 访问量 6537
私信
关注