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

根据基础语法,下面在微信小程序中实现小程序中组件的相对定位。

(1)默认效果

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<!—定义默认的布局方式,每个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文件代码示例

小白教程网www.2d5.net

如下:

/* 定义默认的方块形状,长宽都是100px,外边距10培训 */
.fk{
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: gainsboro;
}
 
/* 改变默认的布局方式,设置flex模式,让最里层的view都放置在一行 */
.cls{
  display: flex;
  flex-direction: row;
}

效果如图5-2所示

image.png

(2)相对定位效果

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<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文件代码示例

小白教程网www.2d5.net

如下:

.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所示

image.png

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