nui-app/小程序/vue移动端flex首页模块化布局思路

首先说明：首页只负责布局，局部样式功能全部放在子组件，做到真正的模块化。分别引入子组件到首页，相应位置即可。子组件的数据可以通过首页执行ajax请求服务器，数据发送给子组件即可。


shouye.jpg

主页面-首页

保存文件路径 pages/index/index.vue

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="page-body">
            <header></header>
            <scroll-view class="main-content" style="flex: 1;"  @scroll="scroll"  @scrolltolower="scrolltolower" scroll-y>
                //引入广告子组件
                <view class="" style="height: 300upx;width: 100vw;">
                    <big-ad  ref="bigAd" ></big-ad>
                </view>
                    
        
                        //引入列表页子组件
                        <view class="uni-flex-item" >
                            <product-list    ref="productList" ></product-list>
                        </view>
                        <view v-if="loading" class="load-more">加载中……</view>

                </scroll-view>

                <footer class="" >
//引入底部导航子组件
                    <bottom-nav   ref="bottomNav" ></bottom-nav>
                </footer>   

        </view>
    </view>
</template>
<script>
    import productList from '../../components/template/product/list.vue';
    import bottomNav from '../../components/template/nav/bottom.vue';
    import bigAd from '../../components/template/swiper/big-ad.vue';
    export default {
        name: "index/index",
        data() {
            return {
                searchInput:'',
                index:0,
                loading:true,//下拉加载开启
                number:1,//每页请求数量
                items:[
                    {
                        fn:this.tijiao,
                        msg:0,
                        name:'首页',
                        ico:'icon-fangzi',
                        url:'/pages/index/index'
                    },{
                        fn:this.tijiao,
                        msg:0,
                        name:'店铺页',
                        ico:'icon-dianpu',
                        url:'/pages/goods/category'
                    },
                    {
                        fn:this.tijiao,
                        msg:230,
                        name:'购物车',
                        ico:'icon-gouwuche',
                        url:'/pages/goods/cart'
                    },
                    {
                        fn:this.tijiao,
                        msg:0,
                        name:'我的',
                        ico:'icon-wode',
                        url:'/pages/user/index'
                    }
                ],
            }
        },
        methods: {
            scrolltolower(e){
                        // 如果下来触发状态未关闭 将会触发请求服务器
                        if(this.loading){
            
                            setTimeout(()=> {
                                setTimeout(()=> {
                                    this.loadData();
                                }, 1000);
                            }, 1000);
                        }
                console.log("底部")
                // 滚到底部或者右边触发
            },
            
            scroll(e){
                // 滚动触发
                // console.log(e)
            },
                    loadData(action = 'add') {
                        const data = [
                            {
                                image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
                                title: 'Apple iPhone X 256GB 深空灰色 移动联通电信4G手机',
                                originalPrice: 9999,
                                favourPrice: 8888,
                                tip: '自营'
                            },
                            {
                                image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product2.jpg',
                                title: 'Apple iPad 平板电脑 2018年新款9.7英寸',
                                originalPrice: 3499,
                                favourPrice: 3399,
                                tip: '优惠'
                            }
                        ];
            
                        if (action === 'refresh') {
                            this.$refs.productList.productList = [];
                        }
                        if(data.length<this.number){
                            // 如果服务器端数据少于20条关闭下拉触发
                            this.loading=false;
                        }else{
                            data.forEach(item => {
                                this.$refs.productList.productList.push(item);
                            });
                            

                        }
            
            },
            tijiao(item){
                console.log(item)
                uni.navigateTo({
                    url: item.url
                });

            }
        },
        mounted: function (){
            
            // el渲染完成触发
            this.$nextTick(function () {
            // this.$refs.bottomNav.index=2;
            // 替换底部nav 内容
            this.$refs.bottomNav.items=this.items;
            // console.log(this.items)
            // console.log(this.$refs.bottomNav);//

          })
            
             
            // this.$refs.bottomNav.index=2;
        },components: { 
            bigAd,bottomNav,productList
        },
    }
</script>

<style>

    .load-more{
        height: 3em;
        
    }
    .page-body{
        justify-content:space-between;
        flex-direction: column;
        align-content: ;
        height: 100vh;
        box-sizing:border-box;
        display: flex;
    }
    header{
}

.main-content{
    margin-bottom: 4.2em;

    text-align: center;
    width: 100%;

    flex:1;
    overflow-y:auto;

    box-sizing:border-box;
}

footer{
    left: 0;
    right: 0;
    position:fixed;
    bottom: 0;

    height: 110upx;
    font-size:1em ;

    background:red;
    bottom: 0;

}


</style>

子组件1：大屏广告

列表页文件路径位置 import bigAd from '../../components/template/swiper/big-ad.vue';

<template>
        <!-- <page-head :title="title"></page-head> -->

            <view class="page-section">
                    <view class="swiper-item-badge" v-if="items.length">
                        <view  :style="index==idx?'background:#fff':''" @tap="index=idx" v-for="(item,idx) in items" :key="idx" >
                            {{idx+1}} 
                        </view>
                        
                    </view>

                    <swiper class="swiper" :indicator-dots="indicatorDots" :current="index"  @change="change" :autoplay="autoplay" :interval="interval" :duration="duration">

                        <swiper-item v-for="(item,idx) in items" :key="idx" class="swiper-item ">

                            <!-- <view class="swiper-item " v-for="(item,index) in items" :key="index"> -->
                                
                                <view class="swiper-item-title">{{item.title}}</view>
                                <image :src="item.image" mode="aspectFill"></image>
                                
                            <!-- </view> -->
                        </swiper-item>
                    </swiper>

            </view>

</template>
<script>
    export default {
        data() {
            return {
                // height:'300upx',

                // title: 'swiper',
                items:[
                    {
                        title:"明天的生活会更好，大家的努力都值得，明天的生活会更好，大家的努力都值得",
                        image:"https://p.pstatp.com/weili/bl/57413396244601585.jpg",
                    },{
                        title:"明天的生活会更好，大家的努力都值得，明天的生活会更好，大家的努力都值得",
                        image:"https://p.pstatp.com/weili/bl/57421573862329129.jpg",
                    },{
                        title:"明天的生活会更好，大家的努力都值得，明天的生活会更好，大家的努力都值得",
                        image:"https://p.pstatp.com/weili/bl/57421573862329129.jpg",
                    }
                    ],
                index:0,//当前显示索引
                indicatorDots: false,//显示指示点
                autoplay: true,//自动轮播
                interval: 2000,//每次轮播间隔时间
                duration: 1000,//轮播进行速度
            }
        },
        methods: {
            change(e){
                // 监听轮播变化
                // console.log(e)
                this.index=e.detail.current;
            },

            setIndicatorDots(e) {
                // 开启/关闭指示点
                this.indicatorDots = !this.indicatorDots
            },
            setAutoplay(e) {
                // 开启/关闭轮播自动
                this.autoplay = !this.autoplay
            },
            setInterval(num) {
                // 设置轮播间隔时间
                this.interval = num;
            },
            setDuration(num) {
                // 设置轮播进行速度
                this.duration = num
            }
        }
    }
</script>

<style>
    .page-section{
        height: 100%;
        /* 调用页面外层div要设置高度 */
        /* height: 500upx; */
        box-sizing: border-box;
        width: 100%;
        min-height: 50upx;
        text-align: center;
        position:relative;
    }
.swiper{
    height: 100%;
    width: 100%;

}
/*  .swiper-item {
        text-align: center;
    } */
    .swiper-item-title{
        opacity:0.5;
        background: #2F2F2F;
        line-height: 1em;
        box-sizing: border-box;
        width: 100%;
        padding: 0.5em;
        bottom: 0;
        position:absolute;
        overflow: hidden;/*超出部分隐藏*/
        white-space: nowrap;/*不换行*/
        text-overflow:ellipsis;/*超出部分文字以...显示*/
    }
    .swiper-item-badge{
        top: 0.2em;
        display: flex;
        right: 1em;
        z-index: 1;
        position:absolute;
    }
    .swiper-item-badge view{
        line-height: 1em;
        margin: 0 0.1em;
        /* text-align: center; */
        padding:0.2em;
        opacity:0.5;
        background: #000;
    }
    .swiper-item image{
        min-height: 100%;
        min-width: 100%;
    }
        
</style>

子组件2-列表页

列表页文件路径位置 import productList from '../../components/template/product/list.vue';

<template>

                <view class="uni-product-list">
                    <view class="uni-product " hover-class="uni-list-cell-hover" v-for="(product,index) in productList" :key="index">
                        <view class="image-view">
                            <image lazy-load v-if="renderImage" class="uni-product-image" :src="product.image"></image>
                        </view>
                        <view class="uni-product-title">{{product.title}}</view>
                        <view class="uni-product-price">
                            <text class="uni-product-price-favour">￥{{product.originalPrice}}</text>
                            <text class="uni-product-price-original">￥{{product.favourPrice}}</text>
                            <text class="uni-product-tip">{{product.tip}}</text>
                        </view>
                    </view>
                </view>
</template>

<script>

export default {
    data() {
        return {
            productList: [
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
                    title: 'Apple iPhone X 256GB 深空灰色 移动联通电信4G手机',
                    originalPrice: 9999,
                    favourPrice: 8888,
                    tip: '自营'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product2.jpg',
                    title: 'Apple iPad 平板电脑 2018年新款9.7英寸',
                    originalPrice: 3499,
                    favourPrice: 3399,
                    tip: '优惠'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product3.jpg',
                    title: 'Apple MacBook Pro 13.3英寸笔记本电脑（2017款Core i5处理器/8GB内存/256GB硬盘 MupxT2CH/A）',
                    originalPrice: 12999,
                    favourPrice: 10688,
                    tip: '秒杀'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product4.jpg',
                    title: 'Kindle Paperwhite电纸书阅读器 电子书墨水屏 6英寸wifi 黑色',
                    originalPrice: 999,
                    favourPrice: 958,
                    tip: '秒杀'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product5.jpg',
                    title: '微软（Microsoft）新Surface Pro 二合一平板电脑笔记本 12.3英寸（i5 8G内存 256G存储）',
                    originalPrice: 8888,
                    favourPrice: 8288,
                    tip: '优惠'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product6.jpg',
                    title: 'Apple Watch Series 3智能手表（GPS款 42毫米 深空灰色铝金属表壳 黑色运动型表带 MQL12CH/A）',
                    originalPrice: 2899,
                    favourPrice: 2799,
                    tip: '自营'
                },
                ],

        };
    },
    methods: {


    },

};
</script>
<style>

.uni-product-list{
    display:flex;
    justify-content:space-around;
    height: 100%;
    width: 100%;
    box-sizing:border-box;
}
.uni-product{
    width: 100%;
    flex: 1;
}
</style>

子组件三：底部导航

文件路径位置 import productList from '../../components/template/nav/bottom.vue';

<template>
    <view  class="bottom-nav">

                <view  class="uni-flex-item" v-for="(item,idx) in items" :key="idx" @tap="index=idx,(item.fn)(item)"  :class="index==idx?'uni-badge-primary uni-badge-inverted':''">
                    <view class="uni-flex-item uni-column">
                        <view class="nav-icon uni-flex-item">
                            
                            <view class="nav-msg" >
                                <view class="uni-badge uni-badge-danger" v-if="item.msg">{{item.msg}}</view>
                            </view>
                            <icon class="uni-flex-item iconfont" :class="item.ico"  >
                            </icon>
                        </view>
                        <view class="uni-flex-item nav-title">
                                {{item.name}}
                        </view>
                    </view>
                    

                </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                index:0,
                items:[
                    {
                        fn:this.tijiao,//自定义点击触发函数，并且携带被触发的内容数据
                        msg:0,//未读消息数量
                        name:'首页',//标题
                        ico:'icon-fangzi',// iconfont字体图标
                        url:''//跳转url
                    },{
                        fn:this.tijiao,
                        msg:1,
                        name:'订单',
                        ico:'icon-dingdanjihe',
                        url:'/pages/goods/category'
                    },{
                        fn:this.tijiao,
                        msg:0,
                        name:'店铺',
                        ico:'icon-dianpu',
                        url:'/pages/goods/category'
                    },{
                        fn:this.tijiao,
                        msg:0,
                        name:'我的',
                        ico:'icon-wode',
                        url:'/pages/goods/category'
                    }]
                
            };
        },mounted(){
            console.log("mounted")
            // console.log(this.$refs.bottomnav)
        
        
        }
    }
</script>

<style>

.bottom-nav{
    width: 100%;
    height: 100%;
    right: 0;
    position:fixed;
    bottom: 0; */
    background:hsl(180,0%,90%);
    font-size: 1em;
    display: flex;
    flex-direction: row;
    text-align: center;
}
.bottom-nav .nav-icon{
    box-sizing: border-box;
}

.bottom-nav .nav-msg{
    margin-left:2em;
    height: 10upx;
}
.bottom-nav .nav-msg .uni-badge{
    padding:1upx 8upx;
    font-size:1em ;
}

.bottom-nav .nav-title{
    height: 1.8em;
    font-size:0.8em ;
}
.bottom-nav .nav-icon{
    line-height: 1em;
    font-size: 2em;
}
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,258评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,335评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,225评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,126评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,140评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,098评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,018评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,857评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,298评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,400评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,993评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2赞 352