登录
注册
模板
购买
商业授权
主机域名
专业授权
易优代理
易优+
应用
源码
插件
问答
帮助
视频教程
易优技巧
常见问题
易优手册
标签工具
更多
小程序
组件库
案例库
小程序模板网
首页
小程序模板网
开发文档
小程序开发教程
正文
微信小程序图片宽度自动,获取组件数据
发布时间:2018-04-16 11:42
所属栏目:
小程序开发教程
作者:xiaochun365,来自原文地址
一:图片宽度自动
//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//监听滚动和点击事件
})
}
二:获取组件数据
//wxml
<dt data-index="{{idMenu}}" bindtap="tapMainMenu">{{menuItem.reportType}}</dt>
//js
tapMainMenu: function (e) {
//获取当前一级菜单标识
var index = parseInt(e.currentTarget.dataset.index);
}
易优小程序(企业版)+灵活api+前后代码开源
码云仓库:
本文地址:https://www.eyoucms.com/wxmini/doc/course/23488.html
复制链接
如需定制请联系易优客服咨询:800182392
点击咨询
热门问题
最新问题
1
微信小程序自定义组件 - 表格组件来啦
2
微信小程序自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)
3
手机界面设计尺寸规范
4
小程序-记牌器
5
微信小程序app.json文件常用配置说明
6
微信小程序获得session_key和openId(加解密、签名系列)
7
微信小程序|实现界面滑动切换
8
小程序登录的最优流程
9
微信小程序尺寸单位rpx和样式使用详解
10
微信小程序-scroll-view滚动到指定位置(类似锚点)
1
微信小程序app.json文件常用配置说明
2
微信小程序文字控制单行超过显示省略号
3
微信小程序参数传递的几种方法
4
微信小程序使用button按钮分享
5
微信小程序的setData
6
小程序分享,获取openid
7
微信小程序-实现tab
8
微信开发者工具新建和导入小程序
9
微信小程序实现点击拍照长按录像功能
10
微信小程序必知知识
产品
商业授权
开通会员
易优代理
推荐主机
服务
更新日志
用户案例
加入Q群
增值服务
帮助
易优问答
标签手册
易优技巧
功能字典
关于
关于易优
知识产权
版权声明
隐私协议
工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务
联系我们
QQ在线咨询
业务客服
付费修改
加入Q群
微信客服
工作日 8:30-12:00 14:30-18:30