實現小選單效果
阿新 • • 發佈:2018-12-13
實現類似上圖所示的小選單:
微信小程式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; }