实战7_导航五帐号页面开发|uniapp专题 | 前端进阶之旅

本节主要讲解 H5+ API 扫码接口，移动端的小字与1px像素边框的处理。

# 页面布局

当前页面的布局沿用在上一节中提到的布局。为两部分：头部标题栏 + 滚动浏览区域。头部标题栏 fixed 固定，内容区用 scroll-view 组件撑开整个页面。

相关代码：

<view>
    <!-- 头部 -->
    <uni-nav-bar fixed :status-bar="true">
        头部内容
    </uni-nav-bar>
    <!-- 滚动区域 -->
    <scroll-view scroll-y="true" class="page-content" @scroll="scroll" :scroll-top="scrollTop">
        滚动区域内容
    </scroll-view>
</view>
data() {
    return {
        scrollTop: 0
    };
},
methods: {
    // 滚动到顶部标题变换
    scroll (e) {
        let scrollTop = e.detail.scrollTop
        if (scrollTop < 5) {
            this.title = ''
            this.scrollTop = 0
        } else {
            this.title = '账号'
        }
    },
}

@前端进阶之旅: 代码已经复制到剪贴板

这里有区别于其他开发页面的是，页面标题栏标题当滚动区域滚动到一定位置时隐藏，由 scroll() 处理监听滚动，当滚动位置达到一定位置时，scroll 页面到滚到顶部并清空标题。使用 scrollTop < 5 而不是 scrollTop == 0 的原因是用户操作触发的滚动值未必会精确到 0，这里对值进行了取舍，临近顶部的时候，取值 scrollTop 为 0。如果运动点达到某一个取值的时候，就让这个点达到理想值下。这是很多运动动画操作的一个方法。

# cell组件

对于这种 cell 样式使用 flex 布局可以快速解决左（图标）+ 右（cell内容）的排版。这种存在重复性的页面可以考虑使用组件去复用，在这里我使用了uni-list-item 组件。

<uni-list>
    <uni-list-item title="口袋彩铃" thumb="/static/image/account/a_16.png" size='mini'/>
    <uni-list-item title="我的订单" thumb="/static/image/account/a_19.png" size='mini' border0/>
    <uni-list-item title="创作者中心" thumb="/static/image/account/a_09.png" size='mini' border0 class="mt16"/>
    <!-- more items -->
</uni-list>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
    components: {
        uniList,
        uniListItem,
    },
    data() {
        return {}
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

对于拿来即用的组件，可能还会与自己实际业务上的设计还有一定差距，这个时候就要自己动手扩展组件属性。根据cell高度需求我在这添加了属性 size='mini' border0，这样 uni-list-item 子组件对着两个属性进行判定 class 名字，样式根据类名进行样式处理：

<!-- uni-list-item.vue -->
<view class="uni-list-item__container" :class="[{'border': border0}, size]">
    <!-- 内容 -->
</view>
props: {
    size: { // 缩略图尺寸
        type: String,
        default: ''
    },
    border0: { // 无边框
        type: Boolean,
        default: false
    },
}
.uni-list-item__container {
    &:before{
        position:absolute;
        content: '';
        right:0;
        bottom:0;
        width:600rpx;
        border-top: 1px solid #e6e6e6;
        transform: scaleY(0.5);
    }
    &.mini{
        padding: 30rpx 30rpx 30rpx 0;
        &:before{
            width:646rpx;
        }
    }
    &.border:before{
        border:0;  // 去掉边框
    }
}