微信小程序----1.获取自适应宽高

最新推荐文章于 2023-07-05 10:31:36 发布
最新推荐文章于 2023-07-05 10:31:36 发布
阅读量3k 收藏 3
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39087035/article/details/80465121
版权

1.在js文件中设置：

2. 在wxml页面：


余思颖
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序-即时天气（已上线）分享
01-27
WeatherWX 微信小程序 由于公司打算要搞一个小程序app,所以趁闲先自己搞一个试试手，小程序搜索----即时天气(已上线)。 浅谈项目 这个项目的天气数据使用了和风的天气api.由于请求用户当前位置的时候只有经纬度，所以又利用了高德的api进行地理反编码。接口方面就这么多了，很简单哈~ 浅谈项目中的难点吧 整体上反正是根据微信小程序官网文档进行开发，有html+css+js的基础的吧，上手很快~就是文档上的wxss的样式代码基本没有，所以有的时候怎么试都不行，像scroll-view，只能百度了，css的知识都忘了很多，像flex,display什么的简直是晕了。反正是一边做一边百度。假如要做一个大项目，看来要买本css的书好好从头看看了。 其他的就是头部的地址展示不会，背景要根据文字自适应,百度后核心代码： <view class='location' bindt
微信小程序宽度宽度百分比 高度自适应
qq_40095973的博客
05-21 7614
&lt;image class="empty-icon" src="/pages/image/list-emptyx2.png" mode="widthFix" style="width:50%"&gt;&lt;/image&gt;mode="widthFix"
微信小程序 自定义表格
Dreamlongs
03-17 837
微信小程序 表格自定义列与列宽自适应 wxml: <scroll-view scroll-x="true" > <view class="flex"> <block wx:for="{{head}}"> <view class="column" style="min-width:calc({{sizeList[index]+1}}e...
微信小程序绘制表格界面
u014388322的专栏
07-05 2044
使用这种方式绘制的表格在开发者工具显示的是没有问题的，以及在Android真机运行也没有问题；但是在ios真机上运行不显示表格界面信息；// 表格内容 这里只能使用 数组套数组格式。th: ["时间", "得分"],-- 表格标题 -->-- 表格内容 -->
微信小程序开发笔记（三）flex布局和自适应单位rpx
man_zuo的博客
01-28 3713
参考教材：《微信小程序开发入门与实践》 雷磊 前置知识：JavaScript，CSS 什么是flex布局 在上一篇博客里，笔者在hello.wxss 里使用了display: flex; 。什么是flex呢？ flex布局是W3c组织在2009年提出的一个新的布局方案，其宗旨是让页面的布局样式更加简单，并且可以很好地支持响应式布局。这并不是小程序所独有的技术，它本身是CSS语法的一部分。只不过早...
微信小程序----简易table表格
热门推荐
人间如梦，倚笑乘风凉。
01-23 6万+
由于需要开发小程序，前端又是自己弄，类似table的标签也没有，后来看到小程序文档中推荐使用flex布局，就把css中的flex布局学了一遍，效果还行，大家将就看一下 table.wxml<view class="table"> <view class="tr bg-w"> <view class="th">head1</view> <view class="th">head2
微信小程序-自动适配屏幕高度和宽度
叉叉敌的博客
08-11 1万+
微信小程序里面的height和width有几种单位，分别是 rpx px vh 和 vw。 rpx https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html wx.getSystemInfo(Object object) 可获取系统信息，屏幕的高度和可使用...
微信小程序 table表格 PC版本
m0_61073617的博客
04-16 3332
公司项目啊....其实小程序页面的商品列表也有宫格、列表、大图模式了，尽管描述得不那么详细，但是信息量也能看到个大概，但是领导或业务员比较喜欢看表格详细点，罗列得比较清晰。 所以要求可以通过小程序分享到微信，PC端登录微信，在微信浏览器窗口中打开看数据。。。不多说了那就开整吧~ 实现：表头固定、内容跨行、默认行高度、自适应窗口、触底加载下一页数据等等... 先上效果图 （mock数据） 小程序是没有原生 table tr th td 这些标签的，但是可以通过css 样式控制 v-for 循环换.
完美解决微信小程序scroll-view高度自适应机型宽度的问题
欧巴酱的CSDN
10-26 5940
  var obj = wx.createSelectorQuery(); obj.selectAll('.head,.bottom').boundingClientRect(function(rect) { let height = app.globalData.windowHeight - rect[0].height - rect[1].height + "px" ...
微信小程序——整个页面的自动适应布局、图片自适应、高度自动占满剩余部分
wy313622821的博客
04-24 1万+
按比例适应布局 大家有没有过一个烦恼，就是让某个view的高度或者宽度扩大点，而且是要按比例适应不同的手机，遇到这类问题应该怎么办？ 下面就为大家讲解怎么做一个能够自动适应不同手机的布局 1、像素单位 rpx 首先，我们来说说像素单位rpx，rpx是官方为小程序出的尺寸单位rpx(responsive pixel)，它可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。所以平常我们应该尽量使用...
微信小程序整个页面的自动适应布局的实现
11-20
按比例适应布局 大家有没有过一个烦恼，就是让某个view的高度或者宽度扩大点，而且是要按比例适应不同的手机，遇到这类问题应该怎么办？ 下面就为大家讲解怎么做一个能够自动适应不同手机的布局 1、像素单位 rpx 首先，我们来说说像素单位rpx，rpx是官方为小程序出的尺寸单位rpx(responsive pixel)，它可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。所以平常我们应该尽量使用rpx来代替px 2、容器view的宽高使用百分百的方式 其次，我们来说说容器view的宽高应该尽量使用百分比的方式来写，下面我们来看看以下的示例： 首先来张显示图 注意：这里的满屏显示设置高度
微信小程序-微信小程序中的图片自适应宽高的计算类
08-07
微信小程序开发论坛 垂直微信小程序开发交流论坛 有话说 如果你已经看过一段时间的微信小程序后，你会发现，小程序中的图片虽然给了很多种mode，但是在你使用过程中，会出现很尴尬的问题。 比如： 图片很高，但是在...
微信小程序小技巧《十九》实现图片高度自适应，带参数分享 ... ...
03-29
1. swiper轮播海报通过wx.getSystemInfo接口获取屏幕高度，高度依据图片宽高等比缩放   (此图片来源于网络，如有侵权，请联系删除! ) 运行于app.js，全局保存 // 设备信息 wx.getSystemInfo({ success: function...
微信小程序入门第二篇2-1
01-03
4.在微信小程序中所触发的各种事件，都可以通过event事件来将信息获得。event事件的属性中的target和currentarget几乎是一样的，只有在冒泡事件的时候是不一样的。 5.在wxml页面中，data-设置变量的时候是不分大小写...
最火推荐130个毕业设计微信小程序源码
03-30
100多个源码小程序，微信小程序全套源代码(后台、小程序php) 微信小程序,完整项目,源代码,后台,小程序 小程序类型列表： .idea AppleMusic B站首页界面设计：附详细教程 cnode社区版 dribbble FlexLayout布局 gank ...
微信小程序---2.循环遍历（img）
余思颖
05-26 2万+
在wxml页面中1. 最外层包裹的是 微信所有的block标签，设置wx:for=””（需要循环的数组）、wx:for-item=””(接收需要循环的key与key值的变量)、wx:for-index=”” (循环key值的下标，索引，可以是index，也可以是id)、设置key值（可绑定index值，若想获取当前数组而不是index，则使用*this的方式绑定）2. 在第二层，也就是接收数据的位...
微信小程序 本地存储及调用
余思颖
05-07 1万+
一、本地存储//建议：在选择图片或文件后立即进行本地存储，如图片，我使用的是异步存储wx.setStorage({                  key: 'Imgs',//自己去的key名，必须有，因为调用时会用到                  data: tempFilePaths //及接收储图片或文件地址的变量                })二、本地调用//建议：在某项点击事件...
微信图片选择及上传
余思颖
05-07 929
一、图片选择及上传①.选择wx.chooseImage({ sourceType: ['album', 'camera'],  // 可以指定来源是相册还是相机，默认二者都可以 success: function (res) {//这里放置：1.let objcet = res.xxx2.wx.showToast({                title: '//弹出的标题，亦可设置img图片...
微信小程序swiper高度自适应
最新发布
09-05
微信小程序的swiper组件默认是根据图片的高度来设置swiper的高度的，所以如果要实现swiper高度自适应的效果，可以采用以下几种方式： 1. 使用image组件获取图片的高度：在swiper-item中使用image组件来展示图片，并设置mode为aspectFill，然后通过image组件的bindload事件获取到图片加载后的高度，并将该高度动态赋值给swiper组件的高度属性。例如： ```html <swiper style="height:{{swiperHeight}}px;" current="{{current}}"> <block wx:for="{{imageList}}" wx:key="*this"> <swiper-item> <image src="{{item}}" mode="aspectFill" bindload="getImageHeight"></image> </swiper-item> </block> </swiper> ``` ```javascript Page({ data: { swiperHeight: 0, current: 0, imageList: ['image1.png', 'image2.png', 'image3.png'], }, getImageHeight: function(e) { const { index, height } = e.currentTarget.dataset; this.setData({ swiperHeight: height }); } }) ``` 2. 使用wx.createSelectorQuery获取图片高度：在onLoad生命周期函数中使用wx.createSelectorQuery来获取图片的高度，并将该高度动态赋值给swiper组件的高度属性。例如： ```javascript Page({ data: { swiperHeight: 0, current: 0, imageList: ['image1.png', 'image2.png', 'image3.png'], }, onLoad: function() { const query = wx.createSelectorQuery(); query.select('.swiper-item-image').boundingClientRect(res => { this.setData({ swiperHeight: res.height }); }).exec(); } }) ``` ```html <swiper style="height:{{swiperHeight}}px;" current="{{current}}"> <block wx:for="{{imageList}}" wx:key="*this"> <swiper-item> <image class="swiper-item-image" src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> ``` 以上两种方式都可以实现swiper高度自适应的效果，你可以根据自己的实际需求选择其中一种方法来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值