微信小程序swiper组件实现图片宽度自适应
来源:互联网 发布:达内大数据培训学费 编辑:程序博客网 时间:2024/06/05 23:46
微信小程序 图片宽度自适应的实现
实例代码:
wxml 代码:
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="image"> <swiper-item> <image src="{{item.image}}" model="aspectFit" style="width: {{imageWidth}}px;" bindload="imageLoad" /> </swiper-item> </block> </swiper>JS 代码:
imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth,//图片宽度 imgUrls: [ { image: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" }, { image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" }, { image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" }], indicatorDots: false,//是否显示圆点 autoplay: true,//自动播放 interval: 2000,//间隔时间 duration: 1000//监听滚动和点击事件 }) }
阅读全文
0 0
- 微信小程序swiper组件实现图片宽度自适应
- 微信小程序swiper组件实现图片宽度自适应
- 微信小程序 轮播图 swiper图片组件
- 微信小程序图片实现宽度100%,高度自适应
- 微信小程序-Image 图片实现宽度100%,高度自适应
- 微信小程序例子——使用swiper组件实现图片切换
- swiper图片轮播lazy加载自适应浏览器宽度
- [新手教程] 微信小程序 轮播图 swiper图片组件
- 微信小程序中的swiper组件
- 微信小程序----组件之swiper
- 微信小程序swiper高度自适应方法
- 微信小程序image图片自适应宽度比例显示的方法
- 微信小程序image图片自适应宽度比例显示的方法
- 微信小程序把玩(十)swiper组件
- 微信小程序(轮播图 swiper组件)
- 【微信小程序】视图容器-swiper组件
- 学习微信小程序--组件(swiper)
- 微信小程序组件(二)swiper
- 第二节 Scala的函数定义
- Error: Could not find the following Boost libraries:boost_serialization
- JNDI学习总结(一)——JNDI数据源的配置
- 剑指offer:输入一个链表,输出该链表中倒数第k个结点。
- vue.js和mvvm小细节
- 微信小程序swiper组件实现图片宽度自适应
- Log4j 配置详解
- 简单的数据库表到对象的ORM映射
- MySQL
- NoSuchElementException
- hash算法及Java的HashTable源码分析
- 【HTTP】Fiddler(一)- Fiddler简介
- 如何获取input中输入的值
- PHP服务器配置php.ini