uni-app中：点击grid九宫格的单元格，跳转到指定页面

梦里梦外; 2022-02-02 00:23 1900阅读 0赞

<template>  
<view>  
  
<view @click="goData(e)">  
<view data-v-017be5e7="" class="uni-list-cell">  
<view data-v-017be5e7="" class="uni-media-list1">  
<view data-v-017be5e7="" class="uni-media-list-logo borders">  
<img src="../../static/images/二级/1首页/头像005.png" class="touxiang"></img>  
</view>  
<view data-v-017be5e7="" class="uni-media-list-body">  
<view data-v-017be5e7="" class="uni-media-list-text-top">温眸</view>  
<uni-button data-v-53423880="" class="activity" type="warn">活动发布方</uni-button>  
</view>  
</view>  
</view>  
</view>  
  
  
<view class="dian">  
<view class="dian-item0">  
<view class="dian-item1">  
<view class="num">8.34W</view>  
<view class="dian-p">粉丝数量</view>  
</view>  
<view class="dian-item1">  
<view class="num">20.56W</view>  
<view class="dian-p">赞数</view>  
</view>  
<view class="dian-item1">  
<view class="num">10.23W</view>  
<view class="dian-p">评论数</view>  
</view>  
</view>  
</view>  
  
<view class="service">  
<view class="service-head">我的服务</view>  
<uni-grid :options="\[  
\{image:'/static/images/成交列表.png',text:'成交列表'\},  
\{image:'/static/images/报名列表.png',text:'报名列表'\},  
\{image:'/static/images/收益列表.png',text:'收益列表'\},  
\{image:'/static/images/成交列表.png',text:'收货地址管理'\},  
\{image:'/static/images/帮助与客服.png',text:'帮助与客服'\},  
\{image:'/static/images/邀请注册.png',text:'邀请注册'\},  
\{image:'/static/images/我要发活动.png',text:'我要发活动'\},  
\{image:'/static/images/我的活动.png',text:'我的活动'\}\]"  
column-num="4" :show-border="false" @click="goService">  
</uni-grid>  
</view>

<view class="uni-list">  
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">  
<view class="uni-media-list">  
<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-titile">\{ \{value.title\}\}</view>  
<view class="uni-media-time">\{ \{value.time\}\}</view>  
<view class="uni-media-number">\{ \{value.number\}\}</view>  
<view class="uni-media-state">\{ \{value.state\}\}</view>  
<view class="uni-media-enter">\{ \{value.enter\}\}</view>  
</view>  
</view>  
</view>  
</view>  
  
</view>  
</template>

### onLoad() \{   setTimeout(() => \{   this.showImg = true;   \}, 400)   \},   methods: \{   goData(e)\{   uni.navigateTo(\{   url: '../data/data?data=',   success: res => \{\},   fail: () => \{\},   complete: () => \{\}   \});   \},   goService(e)\{   console.log(e)   if(e.index==0)\{   uni.navigateTo(\{   url: "/pages/deal/deal",   success: res => \{\},   fail: () => \{\},   complete: () => \{\}   \});   \};   if(e.index==1)\{   uni.navigateTo(\{   url: "../join/join",   success: res => \{\},   fail: () => \{\},   complete: () => \{\}   \});   \};   if(e.index==2)\{   uni.navigateTo(\{   url: "../profit/profit",   success: res => \{\},   fail: () => \{\},   complete: () => \{\}   \});   \};   if(e.index==3)\{   uni.navigateTo(\{   url: "../address/address",   success: res => \{\},   fail: () => \{\},   complete: () => \{\}   \});   \};   if(e.index==4)\{   uni.navigateTo(\{   url: "../help/help",   success: res => \{\},   fail: () => \{\},   complete: () => \{\}   \});   \};   if(e.index==5)\{   uni.navigateTo(\{   url: "../register/register",   success: res => \{\},   fail: () => \{\},   complete: () => \{\}   \});   \};   if(e.index==6)\{   uni.navigateTo(\{   url: "../publish/publish",   success: res => \{\},   fail: () => \{\},   complete: () => \{\}   \});   \};   if(e.index==7)\{   uni.navigateTo(\{   url: "../myactivity/myactivity",   success: res => \{\},   fail: () => \{\},   complete: () => \{\}   \});   \}         \}         \}      \}   </script> ###

/\* 我的服务结束 \*/  
.logo \{  
display: flex;  
justify-content: center;  
align-items: center;  
\}

.logo image \{  
width: 690upx;  
height: 134upx;  
\}

.swiper-item image \{  
width: 750upx;  
height: 308upx;  
\}

.selected \{  
display: flex;  
justify-content: center;  
align-items: center;  
margin: 50upx 0;  
\}

.selected image \{  
width: 336upx;  
height: 34upx;  
\}

/\* container start \*/  
.uni-media-list \{  
display: flex;  
margin: 50upx 20upx;  
\}

.uni-media-list-logo image \{  
width: 220upx;  
height: 220upx;  
\}

.uni-media-list-body \{  
width: 426upx;  
height: 249upx;  
margin-left: 50upx;  
display: flex;  
flex-direction: column;  
justify-content: space-around;  
margin-top: -20upx;

.uni-media-titile \{  
width: 389upx;  
height: 27upx;  
font-family: PingFang-SC-Regular;  
font-size: 28upx;  
font-weight: normal;  
font-stretch: normal;  
line-height: 35upx;  
letter-spacing: 0px;  
color: \#333333;  
\}

.uni-media-time \{  
width: 450upx;  
height: 21upx;  
font-family: PingFang-SC-Regular;  
font-size: 22upx;  
font-weight: normal;  
font-stretch: normal;  
line-height: 35upx;  
letter-spacing: 0px;  
color: \#666666;  
\}

.uni-media-number \{  
width: 250upx;  
height: 21upx;  
font-family: PingFang-SC-Regular;  
font-size: 22upx;  
font-weight: normal;  
font-stretch: normal;  
line-height: 35upx;  
letter-spacing: 0px;  
color: \#666666;  
\}

.uni-media-state \{  
width: 142upx;  
height: 23upx;  
font-family: PingFang-SC-Regular;  
font-size: 24upx;  
font-weight: normal;  
font-stretch: normal;  
line-height: 35upx;  
letter-spacing: 0px;  
color: \#999999;  
\}

.uni-media-enter \{  
width: 128upx;  
height: 35upx;  
font-family: SourceHanSansCN-Light;  
font-size: 24upx;  
font-weight: normal;  
font-stretch: normal;  
line-height: 35upx;  
text-align: center;  
letter-spacing: 0px;  
color: \#e90028;  
border: 1upx solid \#e90028;  
\}

.uni-media-enter:hover \{  
background-color: red;  
color: white;  
\}

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