1. 程式人生 > >實現小選單效果

實現小選單效果

實現類似上圖所示的小選單:

微信小程式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;
}