微信小程序轮播图自适应实现

 时间:2024-10-12 07:09:47

1、打开小程序开发工具,在项目pages下新建mypage文件夹,在文件夹内新建page,名为mypage,并在app.json中将mypage设为第一页面

微信小程序轮播图自适应实现

3、在mypage.js添加代码,给图片列表赋值,注意要拷贝三张图到mypage文件夹Page({data: {imgUrls: ['s1.jpg','s2.jpg','s3.jpg'],},})

微信小程序轮播图自适应实现

5、修改mypage.wxml代码如下,动态设置swiper组件的高度:<swiper class = "sw" style = "height:{{imgheights[current]}}px" autoplay="true" interval="5000" duration="1000" circular="true" bindchange='bindchange'><block wx:for="{{imgUrls}}" wx:key="{{index}}"><swiper-item><image src="{{item}}" data-id ="{{index}}"mode="widthFix" bindload="imgload"/></swiper-item></block></swiper>mypage.wxss代码如下:.sw{width: 100%;}image{width: 100%;}

微信小程序轮播图自适应实现

7、编译代码,更改模拟器大尺寸,依然可以自适应了,不过原来这个swiper的设计宽高固定的确实很麻烦

微信小程序轮播图自适应实现
  • ps里如何制作径向模糊效果
  • PS如何制作酷炫的动态骑车效果
  • PS调色后期处理为美女图片添加奶油光效果
  • 如何使用Photoshop制作3D立体质感网页按钮?
  • ps使用camera滤镜如何反悔?
  • 热门搜索
    定州旅游景点大全 海南文昌旅游 毕棚沟旅游 长白山滑雪旅游攻略 跟团去台湾旅游攻略 4月份去哪里旅游最好 武汉到黄山旅游攻略 平顶山旅游网 温州海外旅游公司 去哪旅游网