微信小程序实现banner图轮播(动态获取数据),自动获取图片高度
2019-01-17 17:36
1071 查看
效果图:
indicator-active-color="#007aff"//修改选中图片圆点的颜色
js:
[code]const app = getApp() Page({ data: { //-----------模拟banner图----------- imgUrls: [ 'http://cigtb.cn/upload/image/1545118381903.jpg', 'http://cigtb.cn/upload/image/1545118566631.jpg' ], circular: true, //是否显示画板指示点 indicatorDots: true, //选中点的颜色 //是否竖直 vertical: false, //是否自动切换 autoplay: true, //自动切换的间隔 interval: 3000, //滑动动画时长毫秒 duration: 1000, //所有图片的高度 imgheights: [], //图片宽度 imgwidth: 750, //默认 current: 0 }, imageLoad: function (e) {//获取图片真实宽度 var imgwidth = e.detail.width, imgheight = e.detail.height, //宽高比 ratio = imgwidth / imgheight; console.log(imgwidth, imgheight) //计算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight; var imgheights = this.data.imgheights; //把每一张图片的对应的高度记录到数组里 imgheights[e.target.dataset.id] = imgheight; this.setData({ imgheights: imgheights }) }, bindchange: function (e) { // console.log(e.detail.current) this.setData({ current: e.detail.current }) }, } })
wxml:
[code]<!-------------首页轮播图----------------- --> <view class='swiper'> <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}'indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;"> <block wx:for='{{imgUrls}}' wx:key="{{index}}"> <swiper-item> <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad" /> </swiper-item> </block> </swiper> </view>
wxss:
[code].swiper image { width: 100%; height: auto; } .swiper-image { height: 100%; width: 100%; } .slide-image { height: 100%; width: 100%; display: block; }
相关文章推荐
- Android中ConvenientBanner的使用--获取网络图片 --(实现效果是自动轮播图片)
- Android 广告(banner)图片轮播、图片浏览、仿微信大图查看控件(支持视频和gif图片)、支持动态添加数据
- 微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
- Android中ConvenientBanner的使用--获取本地图片 --(实现效果是自动轮播图片)
- [微信小程序]根据图片宽高动态改变swiper(轮播图)组件宽高
- 网络获取图片实现无线自动轮播
- Android使用ViewPager实现图片轮播(高度自适应,左右循环,自动轮播)
- 微信小程序之获取后台动态数据表格布局display:table
- 微信小程序 动态的设置图片的高度和宽度详解及实例代码
- 关于banner获取网络图片设置自动轮播
- 微信小程序之swiper轮播图中的图片自适应高度
- 【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片
- 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
- 微信小程序实现动态获取元素宽高的方法分析
- 微信小程序实现图片轮播功能
- 微信小程序简单实现form表单获取输入数据功能示例
- 微信小程序图片实现宽度100%,高度自适应
- 微信小程序实现图片高度自适应
- 微信小程序实现图片轮播及文件上传
- 微信小程序之swiper轮播图中的图片自适应高度的方法