介绍
本案例实现微信【发现】界面，是无图片版本，如下图：
创建页面
文件结果如下图：
- 在
pages文件夹下，创建discover文件夹 - 在
discover文件夹下，创建discover页面
默认显示该页面
修改 app.json 文件，如下：
"pages": [
"pages/discover/discover",
"pages/index/index",
"pages/logs/logs",
],
将 "pages/discover/discover", 放到 pages 数组的第一项
discover.wxml
<view class="discover-container">
<!-- 顶部标题 -->
<view class="header">
<text class="header-text">发现</text>
</view>
<!-- 朋友圈 -->
<view class="group">
<view class="item" hover-class="active">朋友圈</view>
</view>
<!-- 视频号、直播 -->
<view class="group">
<view class="item" hover-class="active">视频号</view>
<view class="divider"></view>
<view class="item" hover-class="active">直播</view>
</view>
<!-- 扫一扫、听一听 -->
<view class="group">
<view class="item" hover-class="active">扫一扫</view>
<view class="divider"></view>
<view class="item" hover-class="active">听一听</view>
</view>
<!-- 看一看、搜一搜 -->
<view class="group">
<view class="item" hover-class="active">看一看</view>
<view class="divider"></view>
<view class="item" hover-class="active">搜一搜</view>
</view>
<!-- 附近的人 -->
<view class="group">
<view class="item" hover-class="active">附近的人</view>
</view>
<!-- 游戏 -->
<view class="group">
<view class="item" hover-class="active">游戏</view>
</view>
<!-- 小程序 -->
<view class="group">
<view class="item" hover-class="active">小程序</view>
</view>
</view>
discover.wxss
/* 关键：页面整体背景 */
page {
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
/* 关键：最外层容器，加上discover-，避免与 app.wxss 样式重名 */
.discover-container {
width: 100%;
}
/* 顶部标题区域 */
.header {
padding: 30rpx 0;
text-align: center;
}
.header-text {
font-size: 38rpx;
font-weight: 500;
color: #000;
}
/* 每组菜单容器（白色卡片） */
.group {
/* 关键：背景为白色，避免整个分割线显示底色 */
background-color: #ffffff;
margin-bottom: 20rpx;
}
/* 单行菜单选项 */
.item {
font-size: 32rpx;
height: 100rpx;
line-height: 100rpx;
padding: 0 30rpx;
color: #333;
}
/* 分组内分割线 */
.divider {
height: 1rpx;
background-color: #e6e6e6;
/* 左边缩进，不和页面贴边 */
margin-left: 30rpx;
/* 关键：细线效果，解决小程序1px过粗问题 */
transform: scaleY(0.5);
}
/* 点击高亮态 */
.active {
background-color: #eeeeee;
}
解释
分组 group 原理
微信发现页是多块白色分组卡片，每组独立白色背景，块与块之间灰色间隙，所以用外层.group包裹同组菜单。分割线细线实现
小程序直接写height:1px在真机显示会偏粗；transform: scaleY(0.5)垂直压缩线条，实现原生纤细分割线；margin-left让分割线不和页面左右贴边，和文字对齐。hover-class 点击效果
hover-class="active"是小程序内置点击态，手指按压时自动应用.active样式，无需JS。文字垂直居中
height和line-height设置相同值，单行文字自动垂直居中，是移动端列表通用方案。
常见踩坑解决
- 分割线看不到：父容器没设置
background:#fff，页面灰色背景把分割线盖住； - 线条太粗：忘记加
transform: scaleY(0.5)； - 页面空白：忘记在
app.json注册页面路径； - 标题位置不对：使用
navigationStyle":"custom"自定义顶部，替代系统导航栏。