微信小程序 设置宽度是100%,然后图片能成为正方形的方法。小程序按屏幕比例的正方形
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%,然后图片能成为正方形的方法。小程序按屏幕比例的正方形的更多相关文章
- 关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法
一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内 ...
- PDF 补丁丁 0.6.0.3363 版发布(修复无法保存应用程序设置的问题)
本测试版修复了上一测试版无法保存应用程序设置的问题,以及导出导入信息文件的若干小问题.
- 微信小程序的button按钮设置宽度无效
亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...
- 微信小程序设置控件权重
项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单. 1.横向水平布局: 实现水平布局,需要四个view容器组件,其中一个是父容器.如下: & ...
- 微信小程序设置web-view的业务域名
微信小程序设置web-view的业务域名 域名必备 你的域名必须要备案过 你的域名必须是https,而不能是http web-view 在小程序后台添加业务域名,只解析业务域名中的url网页地址的. ...
- 微信小程序设置全局字体
微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx ...
- 微信小程序编译包的获取与解压——在手机中获取小程序编译包wxapkg
准备工作: 微信关注需要下载编译包的小程序,然后点进去看一下,微信就会自动下载相应的编译包到手机上了. 获取小程序编译包: 据说root手机可以直接在手机的文件管理中查找wxapkg文件,自己尝试了下 ...
- 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结
前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...
- html 设置宽度100% 块状元素往下调解决方法
css在设置body的宽度为100%充满整个屏幕时,当浏览器缩小时块状元素会被挤压下去 解决方案非常简单,给body设置一个最小宽度 min-width:960px; 此时即使浏览器缩小,在960像素 ...
随机推荐
- 基于XML配置的Sping AOP详解
一.编写基本处理方法 package com.kang.sping.xml.aop; public class Math{ //加 public int add(int n1,int n2){ int ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- 解决Error:Unable to find method 'org.gradle.api.internal.project.ProjectInternal.
错误描述今天在Github上面下载了一份代码,然后导入到Android Studio中直接报错误 错误描述如下: Error: Unable to find method ‘org.gradle.ap ...
- 关于MySQL的information_schema库简单介绍及实际应用
本文简介 写本文主要是围绕下面几点进行的. 1.information_schema数据库到底是做什么用的? 2.执行alter table 表名 modify column 字段名 类型 这个sql ...
- zabbix 用户自定义监控参数添加
1. item key的添加 key可以带参数,该参数为一个数组列表,可以同时传递多个参数,key的格式如下 key -- [ parameters] -- 例如: vfs.fs.size[/] v ...
- BZOJ 1619 [Usaco2008 Nov]Guarding the Farm 保卫牧场:dfs【灌水】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1619 题意: 给你一个n*m的地形图,位置(x,y)的海拔为h[x][y]. 一个山顶的定 ...
- html5--5-6 绘制圆/弧
html5--5-6 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y ...
- dhclient命令
语法:dhclient(选项)(参数) 选项0:指定dhcp客户但监听的端口号-d:总是以前台方式运行程序-q:安静模式,不打印任何错误的提示信息-r:释放ip地址 参数:网络接口:操作的网络接口 示 ...
- Service的两种启动方式
今天又写Service,提示覆写onBind(),想起Android好像是有个叫做Binder的IPC机制. Service里面有一个onBind(),一个onStartCommand(),两者都能启 ...
- 为什么在启动linux后进入终端提示sh-3.2#
这是Linux系统环境变量设置问题,用户登陆后确保是root权限,可以用如下这两条命令解决:-bash-3.2# cp /etc/skel/.{bash_profile,bashrc} ~-bash- ...