小程序中如何将View按照百分百比，实现等宽高效果

最新推荐文章于 2022-05-18 17:23:01 发布
最新推荐文章于 2022-05-18 17:23:01 发布
阅读量2.6k 收藏
点赞数 3
分类专栏： 前端 小程序开发 移动端 H5 文章标签： 微信小程序 等宽高 按比例等宽高 View等宽高
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42861240/article/details/88553807
版权

1，首先写出布局

<View className='Box'>
	<View className='Box1'>
		<View className='Box2'></View>
	</View>
</View>

2、写出样式

.Box{display: flex;justify-content:space-between;flex-direction:row;}
.Box1{width:23%;border:1PX solid #ccc;}
.Box2{padding-top:100%;}

最后效果：
在这里插入图片描述

小程序-如何实现一个view根据屏幕宽度来实现等宽高
iOS_ZHL_Official的博客
05-17 8558
提问:一个view上面放置3个子view,子view的宽度为屏幕宽度30%,高度和宽度一致?在iOS中,so easy,所以我不说码农从来话不多,以代码说话&lt;view class='diffenceContent superBgColor'&gt; &lt;view class='subContent subBgColor'&gt;1&lt;/view&gt; &lt;view cl...
微信小程序中百分百实现聊天界面
Crazydoubao的博客
05-17 2646
众所周知，全网来看，微信的聊天界面看着就是舒服，那能否在微信小程序中实现该功能，同时可以实现输入文本和语音功能，而且在输入文本时，键盘可以弹起。话不多说，上界面看看。 wxml实现如下： <view> <scroll-view scroll-y scroll-into-view='{{toView}}' style='height: {{scrollHeight}};'> <!-- <view class='scrollMsg'> -->..
微信小程序怎么动态获取view的高度以及获取view到页面顶部的距离
PromiseCao的博客
12-01 2万+
首先给你的xml对象一个id： &lt;view class="usermotto" style="height:213px;" id='mjltest'/&gt; 然后在js里，用一个SelectorQuery来选择对应id的节点（注意id前面要加一个#号），就可以获取对应节点的属性，包括高度。 //创建节点选择器 var query = wx.createSelectorQuery(...
小程序中如何将View按照百分比，实现等宽高效果
yun382657988的博客
04-17 1247
1、布局 <View className='Box'> <View className='Box1'> <View className='Box2'></View> </View> </View> 2、wxss .Box{ display: flex; justify-content:space-between; flex-direction:row; } .Box1{ width:2
微信小程序当高度为屏幕百分比时使宽度保持与高度相等
m0_50865164的博客
08-03 1926
 最近在使用微信小程序开发的项目的过程中，碰到了如下问题：为了在不同设备上显示用户头像时不超出头像的父级容器，我们往往会使用百分制来对容纳头像的容器设置高度，但是设备的高度和宽的并不是相等的，我们设置高度为百分制后，就难以将其宽度设置成与高度相等。为了解决这个问题，我们可以使用vmax尺寸单位对放置头像的容器设置宽高。  在了解vmax之前，先介绍一下vh和vw这两个尺寸单位。与微信小程序中屏幕宽度被分为750rpx类似，设备的屏幕高度被分为100vh，宽度被分为100vw。vmax则是这两者中最大的那个，
微信小程序中使view占满整个屏幕高度的实现方法
热门推荐
houruoyu3的博客
09-02 2万+
前言： 今天做小程序的时候，在项目中要用到一个view占满屏幕高度和宽度，然后再在这个view里放置其他元素的情况。 宽度很简单，直接设置width:750rpx;或者width: 100%;就行。但是高度呢，高度height:100%;是没有效果的，因为必须在父元素高度给定的情况下，height:100%;才有效果。 很多人的解决办法是，在js里获取屏幕高度，然后赋给view，那有没有办法直接在css里完成这个操作呢？ 解决方案： 我们都知道在网页中设置body,html{height:100.
【微信小程序】布局插件：wxgrid
乡下工程师
10-05 1万+
微信小程序发布，web端的插件基本都用不了。接下来应该会有不少微信小程序插件出现吧……
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 API 自己看咯    https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122 ..." 必须为200rpx/200px 不能用百分号 js中
详解微信小程序实现仿微信聊天界面(各种细节处理)
12-01
总的来说，实现微信小程序中的仿微信聊天界面涉及对`scroll-view`、`input`组件的深入理解和事件监听。通过精确地计算和调整元素位置，可以创造出流畅且用户体验良好的聊天界面。开发者需要注意的是，微信小程序的...
微信小程序开发中的疑问解答汇总
01-03
如果想用第三方库来实现，小程序明文规定不支持第三方库的做法，这样做最终小程序审核环节百分百的不通过。 1.scroll-view 在 iOS 上存在 bug 在使用这个组件开发页面的时候，因自带滚动效果，Y 轴滑动在下拉触发 ...
微信小程序 选项卡 swiper默认高度150px（让高度实现自适应）解决方法
weixin_44610025的博客
05-11 1714
微信小程序并没有tab选项卡，但是有一个swiper，所以用swiper写了一个选项卡，写完之后存在一个问题，swiper的默认高度为150px，不能通过给他auto或者百分百自适应，所以经过查阅，用js实现了想要的效果。 wxml <view class = "tab"> <view bindtap = "titleClick" class="{{0 == currentIndex ? 'active' : ''}}" data-idx='0'>全部</view&g
如何用自动布局实现等宽等高等间距
天道酬勤
06-29 2191
1. 基础篇 -目的:用自动布局(StoryBoard中)实现几个View等分屏幕 -效果图: Snip20151130_3.png -实现方法: a.设置第一个view的约束(既灰色view),约束为上,左,下为0,0,0 b.设置第二个view的约束(既蓝色view),约束为上,左,下为0,0,0 c.设置第三个view的约束(既粉色view),约束为上,左,下为
小程序 外层view设置宽100%后再设置padding会导致页面不固定的问题
HB_CXY的博客
03-18 2649
wxss代码 .container-item1 { width: 100%; background-color: white; flex-direction: column; padding: 30rpx; } wxml代码 <view class='container-item1'> <text class='view-white' style...
微信小程序之让view水平垂直居中
yiluanping的博客
10-14 4553
直接上示例代码 //wxml <view class='main'> <view>水平垂直居中</view> </view> //wxss .main { display: flex; align-items: center; justify-content: center; width: 100%; heigh...
小程序中图片自适应宽度比例显示的方法
kiku
09-06 4435
我们都知道微信小程序的组件image是用来显示图片的，它有一下几个属性： 1、src 图片资源地址 2、mode 图片裁剪、缩放的模式 3、binderror 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’} 4、bindload 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’} 但是image有默
解决微信小程序scroll-view高度自适应问题的方法
尐、孽障的博客
01-12 6893
解决微信小程序scroll-view高度自适应问题的方法
微信小程序实现动态改变view标签宽度和高度的方法
cxu123321的博客
03-08 1万+
微信小程序实现动态改变view标签宽度和高度的方法 原创2018-05-12 16:51:1008250 本文主要介绍微信小程序实现动态改变view标签宽度和高度的方法,涉及微信小程序事件响应及使用setData针对data数据动态操作相关实现技巧,希望能帮助到大家。 1、效果展示 2、关键代码 index.wxml文件 1 2 3 4...
flex解决微信小程序ScrollView等组件高度自适应
jiaojiaoiso的博客
05-18 4303
//获取屏幕可用高度 let screenHeight = wx.getSystemInfoSync().windowHeight; 小程序页面开发时经常需要用的scroll-view 和 swiper这两个组件，官方文档显示这两个组件需要设置固定的高度才好用。 当数据列表高度不确定的时候，一开始我是对scroll-view或者swiper高度计算出固定数据。 //获取屏幕可用高度 let screenHeight = wx.getSystemInfoSync().windowHeight; ...
转小程序 view flex 平均分配一行排列
hexiaoniao的博客
12-27 7837
https://blog.youkuaiyun.com/ZkD953/article/details/82422993
微信小程序按钮固定下面
最新发布
03-12
### 微信小程序中实现按钮固定在页面底部的方法 为了使按钮能够固定于微信小程序页面的底部，可以采用多种方式来达成这一目标。一种常见的做法是在 `WXML` 文件中的相应位置定义视图容器，并通过设置特定的样式属性让该容器保持在屏幕底端。 对于简单的布局需求而言，在 `.wxss` 中指定宽度为百分之百并应用定位属性即可满足要求[^3]： ```css .fixed-bottom { width: 100%; position: fixed; bottom: 0; } ``` 而在更复杂的情况下，则可能涉及到额外的结构设计以及动态调整间距等因素。例如，可以通过嵌套多个 `<view>` 组件创建具有不同功能区域（如背景层与实际交互元素），并通过绑定事件处理函数增强用户体验[^2]: ```html <!-- 底部按钮 --> <view class="anniu"> <button form-type="submit" class="btn-normal btbdstk" bind-tap="resetSalaryBtnClick"> <view class="bdstk"><text>重置条件</text></view> </button> <button form-type="submit" disabled="{{disabled}}" class="btn-normal btbdstk"> <view class="sqdzk"><text>确认查询</text></view> </button> </view> ``` 此外，如果需要考虑软键盘弹起等情况对界面造成的影响，还可以利用变量控制内边距大小以适应不同的显示状态[^1]： ```html <view class="bottom" style="padding-bottom: {{ bottomLift }}px;"> <button type="primary">固定底部</button> </view> ``` 综上所述，根据具体的应用场景和个人偏好选择合适的技术方案是非常重要的。无论是采取简洁明了的方式还是构建更为复杂的UI组件，都能有效地实现在微信小程序里将按钮固定到页面最下方的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值