一、概述
上一篇文章，实现了商品数据展示，接下要做的是，导航区域几个icon的跳转。
点击不同的图标，跳转到不同的页面，使用uni.navigateTo实现。
效果如下：
二、实现跳转
需要在pages目录，创建好跳转的页面，比如：goods，contact，pics，videos，结构如下：
./
├── cart
│ └── cart.uvue
├── contact
│ └── contact.uvue
├── goods
│ └── goods.uvue
├── index
│ └── index.uvue
├── login
│ └── login.uvue
├── member
│ └── member.uvue
├── news
│ └── news.uvue
├── pics
│ └── pics.uvue
└── videos
└── videos.uvue新创建好的uvue文件，写一个标题文字即可，例如：goods.uvue
<template>
<view>
商品中心
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>接下来，需要对导航区域4个图标做跳转。可以为每一个图标，绑定点击事件
<view class="nav_item">
<view class="iconfont icon-ziyuan" @click="nav_item_click('/pages/goods/goods')"></view>
<text>网上超市</text>
</view>跳转到指定的url页面
// 导航点击的处理函数
nav_item_click(path) {
console.log("path", path)
uni.navigateTo({
url: path
})
}但是这么做的话，需要写很多代码，比较麻烦。有没有更简单的一点的呢？答案是有的。
就是将需要跳转的图标，写到一个列表里面，然后for循环。 每一个图标，绑定点击事件。
index.uvue完整代码如下：
<template>
<view class="home">
<!-- 轮播区域 -->
<up-swiper :list="swiper" keyName="img" indicator indicatorMode="dot" circular></up-swiper>
<!-- 导航区域 -->
<view class="nav">
<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="nav_item_click(item.path)">
<view :class="item.icon"></view>
<text>{{item.title}}</text>
</view>
</view>
<!-- 推荐商品 -->
<view class="hot_goods">
<view class="tit">推荐商品</view>
<view class="goods_list">
<view class="goods_item" v-for="item in goods" :key="item.id">
<image :src="item.img_url" mode=""></image>
<view class="price">
<text>¥{{item.sell_price}}</text>
<text>¥{{item.market_price}}</text>
</view>
<view class="name">
{{item.title}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
swiper: [],
goods: [],
navs: [
{
icon: 'iconfont icon-ziyuan',
title: '网上超市',
path: '/pages/goods/goods'
},
{
icon: 'iconfont icon-guanyuwomen',
title: '联系我们',
path: '/pages/contact/contact'
},
{
icon: 'iconfont icon-tupian',
title: '社区图片',
path: '/pages/pics/pics'
},
{
icon: 'iconfont icon-shipin',
title: '直播中心',
path: '/pages/videos/videos'
}
]
}
},
onLoad() {
this.get_swiper()
this.get_goods()
},
methods: {
// 获取轮播图的数据
async get_swiper() {
try {
const res = await this.$http.get('/api/getlunbo', {})
// console.log("res", res)
this.swiper = res.message
} catch (err : any) {
// console.error('获取轮播图失败', err)
uni.showToast({
title: '获取轮播图失败' + err.statusCode,
});
}
},
// 获取热门商品列表数据
async get_goods() {
try {
const res = await this.$http.get('/api/getgoods?pageindex=1', {})
// console.log("res", res)
this.goods = res.message
} catch (err : any) {
// console.error('获取轮播图失败', err)
uni.showToast({
title: '获取热门商品列表失败' + err.statusCode,
});
}
},
// 导航点击的处理函数
nav_item_click(path) {
console.log("path", path)
uni.navigateTo({
url: path
})
}
}
}
</script>
<style lang="scss">
.home {
swiper {
width: 750rpx;
height: 380rpx;
image: {
height: 100%;
width: 100%;
}
}
.nav {
display: flex;
flex-direction: row; //横向排列
justify-content: space-around; //平均分布在一行
.nav_item {
text-align: center;
view {
width: 120rpx;
height: 120rpx;
background: $shop-color;
border-radius: 60rpx;
margin: 10px auto;
line-height: 120rpx;
color: white;
font-size: 50rpx;
text-align: center;
}
.icon-tupian {
font-size: 45rpx;
}
text {
font-size: 30rpx;
}
}
}
.hot_goods {
background: #eee;
overflow: hidden;
margin-top: 10px;
.tit {
height: 50px;
line-height: 50px;
color: $shop-color;
text-align: center;
letter-spacing: 20px;
background: #fff;
margin: 7rpx 0;
}
.goods_list {
padding: 0 15rpx;
display: flex;
flex-direction: row; //横向排列
flex-wrap: wrap;
justify-content: space-between;
.goods_item {
background: #fff;
width: 355rpx;
margin: 10rpx 0;
padding: 15rpx;
box-sizing: border-box;
image {
width: 80%;
height: 150px;
display: block;
margin: auto; //图片居中
}
.price {
display: flex;
flex-direction: row;
color: $shop-color;
font-size: 36rpx;
// margin-top: 15rpx;
margin: 20rpx 0 5rpx 0;
text:nth-child(2) {
color: #ccc;
font-size: 28rpx;
margin-top: 5rpx;
margin-left: 17rpx;
text-decoration-line: line-through;
}
}
.name {
font-size: 38rpx;
line-height: 50rpx;
padding-bottom: 15rpx;
padding-top: 10rpx;
}
}
}
}
}
</style>重新编译运行，就是文章开头的效果了。