 |
位置：电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：微信小程序设计教程 > 相对定位-小程序应用 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 相对定位-基础语法 | 下一篇： 绝对定位-基础语法 |
|
根据基础语法，下面在微信小程序中实现小程序中组件的相对定位。 (1)默认效果.wxml文件代码示例如下： <!—定义默认的布局方式，每个view一行，从上到下排列--> <view> <view class='fk'>区块1 </view> <view class='fk'>区块2 </view> <view class='fk'>区块3 </view> </view> <!—改变默认的布局方式，让最里层的view都放置在一行--> <view> <view class='fk'>区块1 </view> <view class='fk'>区块2 </view> <view class='fk'>区块3 </view> </view> .wxss文件代码示例如下： /* 定义默认的方块形状，长宽都是100px，外边距10培训 */
.fk{
width: 100px;
height: 100px;
margin: 10px;
background-color: gainsboro;
}
/* 改变默认的布局方式，设置flex模式，让最里层的view都放置在一行 */
.cls{
display: flex;
flex-direction: row;
}效果如图5-2所示。
(2)相对定位效果.wxml文件代码示例如下： <view> <view class='fk'>区块1 </view> <view class='fk a2'>区块2 </view> <!-- 向右向下各移动50px --> <view class='fk'>区块3 </view> </view> <view> <view class='fk'>区块1 </view> <view class='fk a2'>区块2 </view> <view class='fk'>区块3 </view> </view> .wxss文件代码示例如下： .fk{
width: 100px;
height: 100px;
margin: 10px;
background-color: gainsboro;
}
.cls{
display: flex; /* 定义flex模式 */
flex-direction: row; /* 按行排列，也就是将3个view放置在同一行 */
}
.a2{ /*向右向下各移动50px */
position: relative;
top: 50px;
left: 50px
}效果如图5-3所示。
|
|
| 上一篇： 相对定位-基础语法 | 下一篇： 绝对定位-基础语法 |
