uni-app中v-for点击跳转指定页面

ゝ一纸荒年。 2022-02-01 23:11 557阅读 0赞

<template>  
<view>  
  
<view class="banner" @click="goLogin">  
<view class="banner-item1">  
<image src="../../static/images/1级/di-banner.png"></image>  
</view>  
<view class="banner-item2">狄晓伦</view>  
<view class="banner-item0">  
<view class="banner-item3">技术部</view>  
</view>  
<view class="banner-item4">DIXIAOLUN</view>  
</view>  
  
  
<view class="container">  
<view class="container-item">

<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key" @click="goDetail(key)">  
<image src="../../static/images/1级/bj-01.png" class="container-img"></image>  
<view class="uni-media-list uni-pull-right">  
<view class="uni-media-list-logo">  
<image v-if="showImg" :src="value.img" ></image>  
</view>  
<view class="uni-media-list-body">  
<view class="uni-media-list-text-top">\{ \{value.title\}\}</view>  
<view class="uni-media-list-text-bottom uni-ellipsis">\{ \{value.content\}\}</view>  
</view>  
</view>  
</view>  
</view>

</view>  
  
</view>  
</template>  
<script>  
export default \{  
data() \{  
return \{  
title: 'media-list',  
showImg: false,  
list: \[\{  
title: "巡检任务",  
content: "5",  
img: "/static/images/1级/icon-01.png"  
\},  
\{  
title: "设备保修",  
content: "29",  
img: "/static/images/1级/icon-02.png"  
\},  
\{  
title: "效期提醒",  
content: "356",  
img: "/static/images/1级/icon-03.png"  
\}  
\]  
\}  
\},  
onLoad() \{  
setTimeout(() => \{  
this.showImg = true;  
\}, 400)  
\},  
methods: \{  
goLogin(e)\{  
uni.navigateTo(\{  
url: "../login/login?data=",  
success: res => \{\},  
fail: () => \{\},  
complete: () => \{\}  
\});  
\},  
goDetail(e)\{  
var that = this;  
console.log(e);  
if(e==0)\{  
that.xj();  
\}  
if(e==1)\{  
that.bx();  
\}  
if(e==2)\{  
that.tx();  
\}  
  
\},  
xj()\{  
uni.navigateTo(\{  
url: "../task/task",  
success: res => \{\},  
fail: () => \{\},  
complete: () => \{\}  
\});  
\},  
bx()\{  
uni.navigateTo(\{  
url: "../device/device",  
success: res => \{\},  
fail: () => \{\},  
complete: () => \{\}  
\});  
\},  
tx()\{  
uni.navigateTo(\{  
url: "../remind/remind",  
success: res => \{\},  
fail: () => \{\},  
complete: () => \{\}  
\});  
\}  
  
  
  
\}  
\}  
</script>

.banner-item1 \{  
display: flex;  
justify-content: center;  
align-items: center;  
\}

.banner-item1 image \{  
width: 690upx;  
height: 286upx;  
background-image: linear-gradient(-90deg,  
\#f50000 0%,  
\#c30000 100%),  
linear-gradient(\#7babff,  
\#7babff);  
background-blend-mode: normal,  
normal;  
box-shadow: 0upx 23upx 177upx 0upx rgba(195, 0, 0, 0.3);  
border-radius: 44upx;  
\}

.banner-item2 \{  
width: 145upx;  
height: 45upx;  
font-family: PingFang-SC-Bold;  
font-size: 48upx;  
font-weight: normal;  
font-stretch: normal;  
letter-spacing: 0px;  
color: \#ffffff;  
position: absolute;  
left: 80upx;  
top: 50upx;  
\}

.banner-item0 \{  
width: 144upx;  
height: 58upx;  
background-image: linear-gradient(\#fdfdfd,  
\#fdfdfd),  
linear-gradient(\#b0b0b0,  
\#b0b0b0);  
background-blend-mode: normal,  
normal;  
box-shadow: 0px 35upx 73upx 0px rgba(0, 0, 0, 0.16);  
border-radius: 29upx;  
position: absolute;  
left: 80upx;  
bottom: 80upx;  
text-align: center;  
line-height: 58upx;  
\}

.banner-item3 \{  
width: 95upx;  
height: 31upx;  
font-family: PingFang-SC-Regular;  
font-size: 33upx;  
font-weight: normal;  
font-stretch: normal;  
letter-spacing: 0px;  
color: \#c30000;  
white-space: nowrap;  
padding-left: 22upx;

.banner-item4 \{  
width: 465upx;  
height: 67upx;  
font-family: PingFang-SC-Bold;  
font-size: 89upx;  
font-weight: normal;  
font-stretch: normal;  
letter-spacing: 0px;  
color: \#ffffff;  
opacity: 0.2;  
position: absolute;  
left: 80upx;  
top: 10upx;  
\}

/\* banner end \*/

/\* container start \*/  
.container \{  
margin-top: 100upx;  
display: flex;  
flex-direction: column;  
justify-content: space-between;  
align-items: center;  
\}

.container-img \{  
width: 691upx;  
height: 226upx;  
background-color: \#ffffff;  
/\* box-shadow: 0px 23upx 27upx 2upx rgba(0, 0, 0, 0.11); \*/  
border-radius: 20upx;  
\}

.container-item2 \{  
margin: 50upx 0;  
\}

.uni-media-list-logo image \{  
width: 157upx;  
height: 157upx;  
background-color: \#ffffff;  
box-shadow: 0px 0px 27upx 2upx rgba(59, 147, 253, 0.11);  
border-radius: 50%;  
\}

.uni-list-cell \{  
position: relative;  
\}

.uni-media-list \{  
display: flex;  
position: absolute;  
left: 50upx;  
top: 13upx;  
\}

.uni-media-list-body \{  
display: flex;  
flex-direction: column;  
justify-content: center;  
align-items: center;  
padding-left: 50upx;  
text-align: center;  
\}

.uni-media-list-text-top \{  
width: 148upx;  
height: 34upx;  
font-family: PingFang-SC-Regular;  
font-size: 36upx;  
font-weight: normal;  
font-stretch: normal;  
line-height: 90upx;  
letter-spacing: 0upx;  
color: \#333333;  
padding-bottom: 30upx;  
\}

.uni-media-list-text-bottom \{  
width: 83upx;  
height: 36upx;  
font-family: PingFang-SC-Bold;  
font-size: 48upx;  
font-weight: normal;  
font-stretch: normal;  
line-height: 90upx;  
letter-spacing: 0upx;  
color: \#333333;  
padding-bottom: 60upx;  
\}

/\* container end \*/  
</style>