微信小程序 view 内控件位置问题、以及定位问题（column（显示为多行）和 row （显示为一行））

一、首先需要知道：
小程序的page中的.wxml中有一个默认的最外层布局“page”（在wxml中并未显示出来），默认的width和height是适应内容大小的。可以在.wxss中设置样式：（下面样式：适应页面的宽度和高度）

page{height: 100%;width: 100%;
}

二、当你设置了父布局的宽高之后，再设置内容控件的大小和位置才会生效。
.wxml文件代码如下：

<view class="window_view"><scroll-view class="scroll-view_H" scroll-x="true"><view id="local" class="scroll-view-item_H local"><view class='box'><image src='../../img/location_bar.png'></image><text>定位</text></view></view><view id="img" class="scroll-view-item_H img"><view class='box'><image src='../../img/img_bar.png'></image><text>照片</text></view></view><view id="audio" class="scroll-view-item_H audio"><view class='box'><image src='../../img/audio_bar.png'></image><text>语音</text></view></view><view id="qrcode" class="scroll-view-item_H qrcode"><view class='box'><image src='../../img/qrcode_bar.png'></image><text>二维码</text></view></view><view id="txt" class="scroll-view-item_H txt"><view class='box'><image src='../../img/txt_bar.png'></image><text>文本</text></view></view><view id="video" class="scroll-view-item_H video"><view class='box'><image src='../../img/video_bar.png'></image><text>小视频</text></view></view></scroll-view>
</view>

.wxss文件内容如下：

/* pages/components/components.wxss */
page{//跟布局height: 100%;width: 100%;
}
.window_view {//第一层viewwidth: 100%;height: 100%;display: flex;flex-direction: row;//显示为一行 column显示为多行align-items: flex-end;//列表项置于view的底部 align-items:是view中的控件显示在view的左边/右边/中间
}.scroll-view_H {//第二层的scroll-view 滑动模块width: 100%;height: 200rpx;white-space: nowrap;
}.scroll-view-item_H {width: 150rpx;height: 200rpx;display: inline-flex;margin-left: 5rpx;white-space: nowrap;
}.box {width: 100%;height: 100%;display: flex;flex-direction: column;//显示为多行justify-content: center;
}image {margin-right: auto;margin-left: auto;width: 100rpx;height: 100rpx;
}text {margin-right: auto;margin-left: auto;margin-top: 5rpx;font: 20;
}

预览结果：

微信小程序 view 内控件位置问题、以及定位问题（column（显示为多行）和 row （显示为一行））相关推荐

微信小程序加减控件
微信小程序加减控件  <view class='stepper'><text class='{{minusStatus}}' type ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
微信小程序音乐播放控件，监听播放事件，音乐播放的基本实现
下面我将会为大家初步讲解利用微信小程序的音乐控件制作音乐播放器,以及会遇到的一些问题,最后会附上源码包喔! 图片以及音乐都必须使用网络链接体播放器播放之后闪退,是因为音乐的链接失效了所以闪退监 ...
微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
微信小程序的滑块控件Slider
第一步的创建我们的页面的文件: 然后的话就是我们的wxml文件: 详细的页面布局代码:  <view ...
微信小程序 view内英文数字不换行
给view添加css word-break:break-all; word-break: normal|break-all|keep-all; 值描述 normal 使用浏览器默认的换行规则. br ...
微信小程序日期选择器控件xxxx-xx-xx格式
这个时间选择器,不用在util里面写,直接在js里面写就好啦.这个是2022-08-09格式的,和上一个不太一样,看自己需求选择合适的选择器. 1.indx.js文件 const date = new ...
微信小程序与内嵌网页交互实现支付功能
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究, ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...

微信小程序 view 内控件位置问题、以及定位问题（column（显示为多行）和 row （显示为一行））

微信小程序 view 内控件位置问题、以及定位问题（column（显示为多行）和 row （显示为一行））相关推荐

最新文章

热门文章

微信小程序 view 内控件位置问题、以及定位问题（column（显示为多行） 和 row （显示为一行））

微信小程序 view 内控件位置问题、以及定位问题（column（显示为多行） 和 row （显示为一行））相关推荐

最新文章

热门文章

微信小程序 view 内控件位置问题、以及定位问题（column（显示为多行）和 row （显示为一行））

微信小程序 view 内控件位置问题、以及定位问题（column（显示为多行）和 row （显示为一行））相关推荐