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

 时间: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滤镜如何反悔?
  • 热门搜索
    平遥旅游网 出国旅游需要什么证件 中国旅游年 青岛旅游景点大全介绍 三明旅游景点大全 黄河旅游节 西藏旅游景点大全 旅游卫视节目表 万佛湖旅游攻略 苏州旅游公司