小程序–轮播图

2021年3月6日02:44:06
评论
2,903 次浏览 330字阅读1分6秒

轮播图使用swiper标签,每个轮播项使用swiper-item标签,标签内嵌套image标签

小程序–轮播图

swiper标签存在默认样式:width 100%  heigth 150px

image标签也存在默认样式,导致图片变形

所以将image内图片保持长宽比,正常显示原图尺寸,同时调节swiper标签高度,使轮播图正常显示

小程序–轮播图

swiper标签高度使用图片长宽比计算得出,image标签使用widthFix属性进行原尺寸拉伸

小程序–轮播图

swiper内属性

swiper内图片设置完成后,添加autoplay属性,开启自动切换,开启circular使轮播过度自然,添加dots指示点更加美观
7z7z7z
  • 本文由 发表于 2021年3月6日02:44:06
  • 转载请务必保留本文链接:https://www.7z7z7z.cn/index.php/2021/03/06/%e5%b0%8f%e7%a8%8b%e5%ba%8f-%e8%bd%ae%e6%92%ad%e5%9b%be/
小程序--事件绑定&数据绑定 技术分享

小程序–事件绑定&数据绑定

数据绑定 逻辑数据储存在js文件中,当前端wxml页面与js数据交互时,需要使用数据绑定,在wxml文件中{{}}双花括号内输入js中变量,wxml会从js文件中更新数据到前端 标签内参数也可用作数据...
小程序----全局配置篇 技术分享

小程序—-全局配置篇

本文章用于个人技术总结,视频参考:B站,文档参考:微信官方文档•小程序,图标参考:阿里图标库 全局配置文件 pages字段 创建小程序,观察app.json文件 pages内为小程序所有页面的路径,在...
小程序--事件绑定&数据绑定 技术分享

小程序–事件绑定&数据绑定

数据绑定 逻辑数据储存在js文件中,当前端wxml页面与js数据交互时,需要使用数据绑定,在wxml文件中{{}}双花括号内输入js中变量,wxml会从js文件中更新数据到前端 标签内参数也可用作数据...
小程序----全局配置篇 技术分享

小程序—-全局配置篇

本文章用于个人技术总结,视频参考:B站,文档参考:微信官方文档•小程序,图标参考:阿里图标库 全局配置文件 pages字段 创建小程序,观察app.json文件 pages内为小程序所有页面的路径,在...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: