找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

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

作者:模板之家 2018-4-16 11:42 1207人关注

作者:xiaochun365,来自原文地址 一:图片宽度自动 //wxml swiper indicator-dots={{indicatorDots}} autoplay={{autoplay}} interval={{interval}} duration={{duration}} block wx:for={{imgUrls}} wx:key=image ...

作者: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. }


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)