移动端开发案例【4】“我的”页面开发

所谓案例，直接上代码

标签块：

<template>
    <view class="page">
        <free-nav-bar bgColor="bg-white">
            <free-icon-button slot="right" :icon="'ue6ed'"></free-icon-button>
        </free-nav-bar>
        
        <free-list-item :cover="user.avatar ? user.avatar : '/static/images/userpic.png'" 
        coverSize="120" :title="nickname" showRight @click="open('my/userinfo/userinfo')">
            <view class="flex flex-column">
                <text class="text-dark font-lg font-weight-bold">{{nickname}}</text>
                <text class="text-light-muted font mt-2">微信号：{{user.username}}</text>
            </view>
            <view slot="right">
                <text class="iconfont font-md text-light-muted">&#xe614;</text>
            </view>
        </free-list-item>
        <free-divider></free-divider>
        <free-list-item title="支付" showRight>
            <text slot="icon" class="iconfont font-lg py-1">&#xe66c;</text>
        </free-list-item>
        <free-divider></free-divider>
        <free-list-item title="相册" showRight
        @click="open('find/moments/moments?key=moment')">
            <text slot="icon" class="iconfont font-lg py-1">&#xe608;</text>
        </free-list-item>
        <free-list-item title="关于微信" showRight>
            <text slot="icon" class="iconfont font-lg py-1"> </text>
            <view class="flex align-center">
                <text class="font-md text-dark mr-33">关于微信</text>
                <text class="font-md text-light-muted mr-2"></text>
                <text class="font-md text-light-muted">Version 1.023</text>
            </view>
        </free-list-item>
        <free-divider></free-divider>
        <free-list-item title="设置" showRight  @click="open('my/setting/setting')">
            <text slot="icon" class="iconfont font-lg py-1">&#xe612;</text>
        </free-list-item>
        
    </view>
</template>

js板块：

<script>
    import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
    import freeIconButton from "@/components/free-ui/free-icon-button.vue"
    import freeListItem from "@/components/free-ui/free-list-item.vue"
    import freeDivider from "@/components/free-ui/free-divider.vue"
    import auth from '@/common/mixin/auth.js';
    import { mapState } from 'vuex'
    export default {
        mixins:[auth],
        components: {
            freeNavBar,
            freeIconButton,
            freeListItem,
            freeDivider
        },
        data() {
            return {
                
            }
        },
        computed: {
            ...mapState({
                user:state=>state.user.user
            }),
            nickname(){
                return this.user.nickname ? this.user.nickname : this.user.username
            }
        },
        methods: {
            open(path){
                uni.navigateTo({
                    url: '/pages/'+path
                });
            },
        }
    }
</script>

样式库都是共公样式：

成果演示：

技巧分享

平时有一个板块一个点击，这样就有好多的代码重复写，性能反面也会有一些影响，现在我们可以把要跳转的页面的路由直接当参数来使用，如上图中

 @click="open('my/setting/setting')"

Js部分：

open(path){
    uni.navigateTo({
        url: '/pages/'+path
            });
},

我们只需要四行代码就可以完成页面的跳转！

分享满满当当的干货！！！！！！！！！！

有不懂的，不合适的请联系作者，QQ：1587982750，我们会一一解答你们的问题，欢迎打扰！

 每次只需要修改括号里的对应得路由就ok了