实现小菜单效果

最新推荐文章于 2024-05-17 09:00:34 发布

某某l

最新推荐文章于 2024-05-17 09:00:34 发布

阅读量279

点赞数

分类专栏： .net 微信小程序文章标签：小菜单微信小程序小菜单 html实现小菜单页面布局flex

本文链接：https://blog.csdn.net/SunshineBlog/article/details/83003401

版权

.net 同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

微信小程序

8 篇文章 0 订阅

订阅专栏

实现类似上图所示的小菜单：

微信小程序wxml页面(如果是html之类的可以用div代替view)：

<!-- 菜单 -->
<view class='content'>
  <view class='item'>菜单1</view>
  <view class='item'>菜单2</view>
  <view class='item'>菜单3</view>
</view>
<view class='content'>
  <view class='item'>菜单1</view>
  <view class='item'>菜单2</view>
  <view class='item'>菜单3</view>
</view>

微信小程序wxss页面（相当于html的css'）：

.content {
  display: flex; /*显示方式为flex*/
  flex-direction: row; /*布局方式为水平*/
  justify-content: space-around; /*位置平分*/
  margin-top: 25rpx;
}

.item {
  width: 100rpx;
  height: 100rpx;
  background-color: skyblue;
  border-radius: 50%; /*圆角*/
  text-align: center;
  line-height: 100rpx;
  font-family: 宋体;
  font-size: 35rpx;
}