开始

修改页面标题

从home页跳转过去

    onNavigationBarButtonTap(e) {
            if (e.index == 0) {
                console.log('跳转设置页');
                uni.navigateTo({
                    url:'../user-set/user-set'
                })
            }
        },

封装的组件。判断icon图标是否存在才去显示。

<view class="u-f-ac">
            <view v-if="item.icon"
            class="icon iconfont"
            :class="['icon-'+item.icon]"></view>
            {{item.name}}
        </view>

import homeListItem from '@/components/home/home-list-item.vue';

最外层加边距

<view class="body">
        <block v-for="(item,index) in list" :key="index">
            <home-list-item :item="item" :index="index"></home-list-item>
        </block>
    </view>

list: [{
                        icon: "",
                        name: "账号与安全"
                    },
                    {
                        icon: "",
                        name: "绑定邮箱"
                    },
                    {
                        icon: "",
                        name: "资料编辑"
                    },
                    {
                        icon: "",
                        name: "小纸条"
                    },
                    {
                        icon: "",
                        name: "清除缓存"
                    },
                    {
                        icon: "",
                        name: "意见反馈"
                    },
                    {
                        icon: "",
                        name: "关于糗百"
                    },
                ]

按钮

<button class="user-set-btn" type="primary">退出登陆</button>

是00%的宽度，上下20的外边距。

取按钮的颜色

背景色和字体的颜色

.user-set-btn{
        width: 100%;
        margin: 20upx 0;
        background: #FFE933;
        color: #333333;
    }

边框设置为0

.user-set-btn{
        width: 100%;
        margin: 20upx 0;
        background: #FFE933!important;
        border: 0!important;
        color: #333333;
    }

.user-set-btn{
        width: 100%;
        margin: 20upx 0;
        background: #FFE933!important;
        border: 0!important;
        color: #333333!important;
    }

本节代码

user-set.vue页面

<template>
    <view class="body">
        <block v-for="(item,index) in list" :key="index">
            <home-list-item :item="item" :index="index"></home-list-item>
        </block>
        <button class="user-set-btn" type="primary">退出登陆</button>
    </view>
</template>
<script>
    import homeListItem from '@/components/home/home-list-item.vue';
    export default {
        components: {
            homeListItem
        },
        data() {
            return {
                list: [{
                        icon: "",
                        name: "账号与安全"
                    },
                    {
                        icon: "",
                        name: "绑定邮箱"
                    },
                    {
                        icon: "",
                        name: "资料编辑"
                    },
                    {
                        icon: "",
                        name: "小纸条"
                    },
                    {
                        icon: "",
                        name: "清除缓存"
                    },
                    {
                        icon: "",
                        name: "意见反馈"
                    },
                    {
                        icon: "",
                        name: "关于糗百"
                    },
                ]
            }
        },
        methods: {
        }
    }
</script>
<style>
    .body {
        padding: 0 20upx;
    }
    .user-set-btn{
        width: 100%;
        margin: 20upx 0;
        background: #FFE933!important;
        border: 0!important;
        color: #333333!important;
    }
</style>

结束