微信小程序js的全局调用,图片宽高自适应

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2017-5-11 09:34:39 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一:js的全局调用
1.要注意的是必须要用module.exports导出要调用属性或方法;
2.使用的时候用var api = require('../../utils/api.js'); 加载代码,然后使用api.SYNC_TABLE_URL 直接调用
3.调用方法也差不多。

1.png
2.png

3.png

4.png

二:图片宽高自适应
  1. <image src="url" class="imgClass" model="aspectFit" bindload="imageLoad" />
复制代码
1.以前将小程序图片宽度设置为屏幕宽度:
  1. imageLoad: function () {
  2.      this.setData({
  3.          imageWidth: wx.getSystemInfoSync().windowWidth
  4.      })
  5. }
复制代码
2.现在:
  1. .imgClass{
  2.   width: 100vw;
  3. }
复制代码
解析:
CSS3引入的”vw”和”vh”基于宽度/高度相对于窗口大小
”vw”=”view width”“vh”=”view height”
以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。
参照demo案例对照下面四个容器的css样式:
  1. .demo {
  2.    width: 100vw;
  3.    font-size: 10vw; /* 宽度为窗口100%, 字体大小为窗口的10% */
  4. }
  5. .demo1 {
  6.    width: 80vw;
  7.    font-size: 8vw; /* 宽度为窗口80%, 字体大小为窗口的8% */
  8. }
  9. .demo2 {
  10.    width: 50vw;
  11.    font-size: 5vw; /* 宽度为窗口50%, 字体大小为窗口的5% */
  12. }
  13. .demo3 {
  14.    width: 10vw;
  15.    height: 50vh; /* 宽度为窗口10%, 容器高度为窗口的50% */
  16. }
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1