1.在全局app.js中获取设备的宽度

  globalData: {
userInfo: null,
sysWidth:wx.getSystemInfoSync().windowWidth, //图片宽度
}

2.在其他js中加载时设置高度变量 如a.js

    var appInstance = getApp();
console.log(appInstance.globalData.sysWidth);
this.setData({
sysWidth: appInstance.globalData.sysWidth
});

3.在引用的wxml中设置 style样式

<swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" style='height:{{sysWidth}}px'>  

这里实现的是swiper的宽度是100%,的正方形轮播,效果如图

当然你也可以设置成80%等等,原理相同

解决问题了请点赞哈哈

微信小程序 设置宽度是100%,然后图片能成为正方形的方法。小程序按屏幕比例的正方形的更多相关文章

  1. 关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法

    一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内 ...

  2. PDF 补丁丁 0.6.0.3363 版发布(修复无法保存应用程序设置的问题)

    本测试版修复了上一测试版无法保存应用程序设置的问题,以及导出导入信息文件的若干小问题.

  3. 微信小程序的button按钮设置宽度无效

    亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...

  4. 微信小程序设置控件权重

    项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单.       1.横向水平布局:         实现水平布局,需要四个view容器组件,其中一个是父容器.如下: & ...

  5. 微信小程序设置web-view的业务域名

    微信小程序设置web-view的业务域名 域名必备 你的域名必须要备案过 你的域名必须是https,而不能是http web-view 在小程序后台添加业务域名,只解析业务域名中的url网页地址的. ...

  6. 微信小程序设置全局字体

    微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx ...

  7. 微信小程序编译包的获取与解压——在手机中获取小程序编译包wxapkg

    准备工作: 微信关注需要下载编译包的小程序,然后点进去看一下,微信就会自动下载相应的编译包到手机上了. 获取小程序编译包: 据说root手机可以直接在手机的文件管理中查找wxapkg文件,自己尝试了下 ...

  8. 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结

    前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...

  9. html 设置宽度100% 块状元素往下调解决方法

    css在设置body的宽度为100%充满整个屏幕时,当浏览器缩小时块状元素会被挤压下去 解决方案非常简单,给body设置一个最小宽度 min-width:960px; 此时即使浏览器缩小,在960像素 ...

随机推荐

  1. js json按key值排序

    最近有个需求需要把json按key值进行排序,可是js并没有直接的函数可以对json进行排序的这么办呢? 然后想到了一个间接的方法来实现: 1.将json中的key值取出,存在一个数组中,然后对这个数 ...

  2. LeetCode(70)题解: climbing-stairs

    https://leetcode.com/problems/climbing-stairs/ 题目: You are climbing a stair case. It takes n steps t ...

  3. poj 2154 Color < 组合数学+数论>

    链接:http://poj.org/problem?id=2154 题意:给出两个整数 N 和 P,表示 N 个珠子,N种颜色,要求不同的项链数, 结果 %p ~ 思路: 利用polya定理解~定理内 ...

  4. 九度OJ 1140:八皇后 (八皇后问题)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:795 解决:494 题目描述: 会下国际象棋的人都很清楚:皇后可以在横.竖.斜线上不限步数地吃掉其他棋子.如何将8个皇后放在棋盘上(有8 * ...

  5. Two-Factor Authentication 2FA

    About two-factor authentication - User Documentation https://help.github.com/articles/about-two-fact ...

  6. 最简单的Windows程序

    准备研究一下vmp 保护,从一个最简单的Windows程序入手似乎是个不错的想法. 如何才最简单呢,仅仅有一个MessageBox 调用好了. 弹出消息.退出,哦也,够简单吧. 祭出法器VC2010. ...

  7. 区分:WebElement, MobileElement, AndroidElement, and iosElement

    区分:WebElement, MobileElement, AndroidElement, and iosElement 原文地址:https://discuss.appium.io/t/differ ...

  8. appium(12)-The starting of an app

    Steps: you have to prepare environment for Android. Details are provided here: http://appium.io/slat ...

  9. async函数学习笔记

    含义 async函数是什么?一句话,它就是Generator函数的语法糖. const fs = require('fs') const readFile = function(fileName){ ...

  10. 怎样使用alsa API

    翻译文章的链接: http://equalarea.com/paul/alsa-audio.html 关于怎么使用ALSA API教程 这份文档帮助对ALSA API使用入门.不是一个完整的ALSA ...