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

你的名字 2022-02-01 23:19 251阅读 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)\{  
console.log(e);  
if(e==0)\{  
uni.navigateTo(\{  
url: "../task/task",  
success: res => \{\},  
fail: () => \{\},  
complete: () => \{\}  
\});  
\};  
if(e==1)\{  
uni.navigateTo(\{  
url: "../device/device",  
success: res => \{\},  
fail: () => \{\},  
complete: () => \{\}  
\});  
\};  
if(e==2)\{  
uni.navigateTo(\{  
url: "../remind/remind",  
success: res => \{\},  
fail: () => \{\},  
complete: () => \{\}  
\});  
\}  
  
\}  
  
  
\}  
\}  
</script>