阿咩1024
阿咩1024
  • 发布:2020-03-27 11:04
  • 更新:2020-03-27 11:04
  • 阅读:719

底部的版权所有view组件一直浮动

分类:uni-app

以下是我的代码,但是那个123公司版权所有一行,老是浮动起来了,在窗口底部,而不是页面底部

<template>  
    <view class="container">      
        <view class="topmenu">  
            <view class="navi" v-for="(item,index) in pCatalog" :key="index" @tap="leftTap" :data-index="index"  >  
                <view class="">  
                    <view>{{item}}</view>  
                    <view :class="{ 'active':index==leftIndex }" ></view>  
                </view>  
            </view>           
        </view>  

        <scroll-view class="u-f u-f-column u-f-ajc u-f-ai-fs " :scroll-into-view="scrollIndex" scroll-with-animation="ture" :style="{ 'height':scrollHeight }" scroll-y="ture">  
            <view class="prodlist" v-for="(item,index) in mainList" :key="index"  :id="'item'+index" >            
                <view class="pTitle"><text>{{item.pcata}}</text></view>  
                <view class="pGroup">  
                    <view class="pCard" v-for="(item2,index2) in item.list" :key="index2" @tap="product(item2.pName)">  
                        <view class="pImg">  
                            <image :src="item2.imgurl" mode="widthFix"></image>  
                        </view>  
                        <view class="pDes ">  
                            <text class="pName">{{item2.pName}}</text>  
                            <text class="pDesc">{{item2.pDesc}}</text>  
                        </view>  
                    </view>  
                </view>  
            </view>  
        </scroll-view>  
        <view class="bottom-info">  
            <view class="text-sm text-center text-gray">123有限公司@2020版权所有</view>  
        </view>  
    </view>  
</template>  

<script>  

    export default {  
        /* globalData:{  
            pageProDTitle:''  
        }, */  

        data() {  
            return {  
                pCatalog:[  
                    '焊锡条',  
                    '无铅锡条',  
                    '焊锡丝',  
                    '无铅锡丝',  
                    '焊锡膏',  
                    '无铅锡膏'  
                ],  
                scrollIndex:'',  
                leftIndex:0,  
                mainList:[  
                    {  
                        pcata:'焊锡条',  
                        list:[  
                                {  
                                    'pName':'焊锡条',  
                                    'pDesc':'Sn60Pb40',  
                                    'imgurl':'../../static/image/solderbar.jpg'  
                                },  
                                {  
                                    'pName':'焊锡条2',  
                                    'pDesc':'Sn63Pb37',  
                                    'imgurl':'../../static/image/solderbar.jpg'  
                                },  
                                {  
                                    'pName':'焊锡条3',  
                                    'pDesc':'Sn60Pb40',  
                                    'imgurl':'../../static/image/solderbar.jpg'  
                                },  
                                {  
                                    'pName':'焊锡条4',  
                                    'pDesc':'Sn63Pb37',  
                                    'imgurl':'../../static/image/solderbar.jpg'  
                                }  
                            ]  
                    }     

        },  
        components: {  

            },  
        onLoad(){  
                uni.getSystemInfo({  
                    success:(res)=>{  
                        /* 设置当前滚动容器的高,若非窗口的高度,请自行修改 */  
                        this.scrollHeight=`${res.windowHeight}px`;  
                    }  
                });  
            },  
        methods: {  

            product(t1){  

                // getApp().globalData.pageProDTitle=t1;  

                uni.navigateTo({  
                    url:'../product-detail/product-detail?name='+t1  
                })  
            },  

            /* 顶部导航点击 */  
            leftTap(e){  
                let index=e.currentTarget.dataset.index;  
                this.scrollIndex=`item${index}`;  
                this.leftIndex=index;  
            }  
        }  
    }  
</script>  

<style>  
    .container{  
        margin-top: 80upx;  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        width: 100%;  
        background-color: #dee9ec;  
        /* position: absolute; */  
    }  

    .topmenu{  
        display: flex;  
        flex-direction: row;  
        justify-content: space-around;  
        align-items: center;  
        width: 100%;  
        margin-top: 10upx;  
        white-space: nowrap;  
        /* border-radius: 30upx; */  
        /* border: 2upx solid #dfdfdf; */  
        background-color: #ffffff;  
        position: fixed;  
        top: 72upx;  
        z-index: 99;  
    }  

    .active{  
        /* color: #FFFFFF; */  
        background-color: #0277ba;  
        padding-bottom: 5upx;  
    }  

    .navi{  
        white-space: nowrap ;  
        /* line-height: 40upx; */  
        /* font-size: 28upx; */  
        /* width: 100%; */  
        /* display: inline-block; */  
        /* flex-direction: row; */  
        /* justify-content: center; */  
        /* align-items: center; */  
        text-align: center;  
        line-height: 60upx;  
        font-size: 28upx;  
        padding-left: 10upx;  
        padding-right: 10upx;  
        /* border-left: 0.5upx solid #D0D0D0; */  
        /* background-color: #FFFFFF; */  
    }  
    .navi:first-child{  
        /* border-top-left-radius: 30upx;  
        border-bottom-left-radius: 30upx;  
        border-left: 0upx solid #D0D0D0; */  
    }  
    .navi:last-child{  
        /* border-top-right-radius: 30upx;  
        border-bottom-right-radius: 30upx; */  
    }  

    .navi view{  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
    }  
    .navi view:nth-child(2){  
        line-height: 5upx;  
        width: 100%;  
    }  

    /* 产品资料 */  
    .prodlist{  
        margin-top: 10upx;  
        display: flex;  
        flex-direction: column;  
        justify-content: flex-start;  
        align-items: flex-start;  
        background-color: #ffffff;  
        width: 100%;  
        padding-top: 10upx;  
    }  
    .prodlist .pTitle{  
        white-space: nowrap;  
        margin-bottom: 20upx;  
        margin-left: 20upx;  
        padding-left: 10upx;  
        /* border-bottom: 2upx solid #22ab42; */  
        background-color: #0277ba;  
        line-height: 30upx;  
    }  
    .prodlist .pTitle text{  
        background-color: #ffffff;  
        /* padding-right: 30upx; */  
        padding-left: 10upx;  
        /* padding-top: 8upx; */  
        /* border-top-right-radius: 100upx; */  
        font-size: 30upx;  

        /* font-weight: bold; */  
        /* color: #FFFFFF; */  

    }  
    .prodlist .pGroup{  
        display: flex;  
        flex-direction: row;  
        flex-wrap: wrap;  
        justify-content: space-around;  
        align-items: center;  
        width: 100%;  

    }  
    .pCard{  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        width: 45%;  
        border: 3upx solid #AAAAAA ;  
        /* border-radius: 50upx; */  
        /* box-shadow: 0 0 1upx #C0C0C0; */  
        margin-bottom: 20upx;  
        /* border-radius: 30upx; */  
    }  
    .pCard .pImg{  
        display: flex;  
        flex-direction: column;  
        align-items: flex-start;  
        justify-content: flex-start;  
        width: 100%;  
        border-bottom: 2upx solid #eeeeee;  
    }  

    .pCard .pDes{  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        width: 100%;  
        background-color: #0277ba;  
        color: #FFFFFF;  
    }  
    .pCard .pDes .pName{  
        font-size: 30upx;  
        font-weight: bold;  
    }  
    .pCard .pDes .pDesc{  
        /* color: #888888; */  
        font-size: 26upx;  
    }  
    .bottom-info{  
        background-color: #2C405A;  
        line-height: 40upx;  
        display: flex;  
        justify-content: center;  
        flex-direction: column;  
        align-items: center;  
        width: 100%;  
        position: absolute;  
        bottom: 0;  
    }  
</style>  
2020-03-27 11:04 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复