以下是我的代码,但是那个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>
0 个回复