位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 绝对定位-小程序应用
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 绝对定位-基础语法 下一篇: 浮动-基础语法

根据基础语法,下面在微信小程序中实现组件如何实现绝对定位。典型的应用是制作居于顶部和底部的菜单。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
  <view >区块1 </view>
  <view  class='fk a2'>区块2 </view> <!--该区块实现绝对定位,距离顶部和左边都是30px-->
  <view >区块3 </view>
</view>
 
<view>
  <view >区块1 </view>
  <view  class='fk a3'>区块2 </view> <!--该区块实现绝对定位,居于底部-->
  <view >区块3 </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

/* 定义方块 */
.fk{
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: gainsboro;
}
 
/* 定义flex模式,让三个view都在同一行 */
.cls{
  display: flex;
  flex-direction: row;
}
 
.a2{
  background-color: gray;
  position: absolute; /* 实现绝对定位 */
  top: 30px;  /* 距离顶部30px */
  left: 30px  /* 距离左边30px */
}
 
.a3{
  background-color: cadetblue;
  position: absolute; /* 实现绝对顶部 */
  bottom: 0px;          /* 距离底部0px */
}

效果如图5-5所示

image.png


上一篇: 绝对定位-基础语法 下一篇: 浮动-基础语法
毕业设计网             广告联系QQ:45157718(微信同号)