微信小程序 flex实现导航实例详解

微信小程序 Flex布局导航实例详解

在微信小程序中，使用Flex布局实现导航是一个常见且实用的功能。下面，我们将详细介绍如何实现这一过程。

一、设计概述

我们需要通过链接顶部内边距留出空间以放置圆形图标。接着，利用伪元素:before绘制圆形，并在圆形中添加图标。通过控制左右外边距来调整间距，以便在需要的地方进行换行。

二、代码实现

在WXML中，我们创建一个名为serviceMenu的视图容器，并在其中添加多个navigator组件。每个navigator组件代表一个导航链接。例如：

```html

资本

```

接着，在WXSS中定义样式。使用flex布局来实现导航菜单的灵活布局。例如：

```css

.serviceMenu {

display: flex; / 使用flex布局 /

flex-wrap: wrap; / 子元素换行 /

justify-content: center; / 子元素居中对齐 /

padding: 30rpx 0; / 留出上下边距 /

}

.serviceMenu navigator {

position: relative; / 为了绝对定位 /

padding-left: 120rpx; / 留出圆形图标的位置 /

flex-basis: 140rpx; / 设定基础宽度 /

margin: 15rpx; / 触发换行位置 /

text-align: center; / 文字居中对齐 /

font-size: 24rpx; / 字体大小 /

}

```

为了创建图标，我们可以使用伪元素:before来绘制圆形背景，并设置背景图片。例如：

```css

.serviceMenu navigator:before {

content: ""; / 创建伪元素 /

position: absolute; / 绝对定位 /

top: 0; / 定位位置 /

left: 50%; / 定位位置 /

margin-left: -55rpx; / 调整位置 /

width: 110rpx; / 宽度 /

height: 110rpx; / 高度 /

border-radius: 50%; / 圆形边框 /

background: bbc1cd url(链接地址) no-repeat center center; / 背景图片 /

}

```

注意：链接地址需要是绝对地址，因为小程序不支持相对地址的背景图。只支持image标签使用相对地址。可以根据需要添加不同图标的样式。如果需要限制文本长度，可以使用以下样式：text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 来实现文本超出部分隐藏并显示省略号的效果。感谢阅读本文，希望能对大家有所帮助。谢谢支持！