小程序模板网

微信小程序图片宽度自动,获取组件数据

发布时间:2018-04-16 11:42 所属栏目:小程序开发教程

作者:xiaochun365,来自原文地址

 

一:图片宽度自动

 

				
  1. //wxml
  2. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  3. <block wx:for="{{imgUrls}}" wx:key="image">
  4. <swiper-item>
  5. <image src="{{item.image}}" model="aspectFit" style="width: {{imageWidth}}px;" bindload="imageLoad" />
  6. </swiper-item>
  7. </block>
  8. </swiper>
 

				
  1. //js
  2. imageLoad: function () {
  3. this.setData({
  4. imageWidth: wx.getSystemInfoSync().windowWidth,//图片宽度
  5.  
  6. imgUrls: [
  7. { image: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" },
  8. { image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" },
  9. { image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" }],
  10. indicatorDots: false,//是否显示圆点
  11. autoplay: true,//自动播放
  12. interval: 2000,//间隔时间
  13. duration: 1000//监听滚动和点击事件
  14. })
  15. }
 

二:获取组件数据

 

				
  1. //wxml
  2. <dt data-index="{{idMenu}}" bindtap="tapMainMenu">{{menuItem.reportType}}</dt>
 

				
  1. //js
  2. tapMainMenu: function (e) {
  3. //获取当前一级菜单标识
  4. var index = parseInt(e.currentTarget.dataset.index);
  5. }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23488.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询