持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

导航改造

现在把导航的数据放入 data，通过 v-for 循环展示，然后给导航增加 click 事件，点击跳转对应页面（要跳转的页面暂时没有，后边会新增）

<template>
	<view class="content">
		<!--轮播图-->
		......
		<!--导航-->
		<view class='nav'>
			<view class='nav_item' v-for="item in navs" @click='navItemClick(item.path)'>
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!--推荐商品-->
		......
	</view>
</template>

<script>
	export default {
		data() {
			return {
				......
				navs:[
					{
						icon:'iconfont icon-shangpin',
						title:'uni-超市',
						path:'/pages/goods/goods'
					},
					{
						icon:'iconfont icon-xinxi',
						title:'联系我们',
						path:'/pages/contact/contact'
					},
					{
						icon:'iconfont icon-tuku',
						title:'社区图片',
						path:'/pages/pics/pics'
					},
					{
						icon:'iconfont icon-diannao',
						title:'学习视频',
						path:'/pages/videos/videos'
					}
				]
			}
		},
		......
		methods: {
			......
			
			//导航点击跳转
			navItemClick(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>
......

商品列表

接下来写商品列表页面，由于商品列表页的样式和首页的推荐商品是一样的，所以创建一个商品列表组件，我们在根目录下创建 components/goods-list/goods-list.vue，内容就是 index.vue 中的商品列表，同时样式也要记得剪切过来

<template>
	<view class="goods_list">
		<view class="goods_item" v-for="item in goods">
			<image :src="item.goods_big_logo"></image>
			<view class="price">
				<text>{{item.goods_price}}</text>
				<text>￥2499</text>
			</view>
			<view class="name">
				<text>{{item.goods_name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"goods-list",
		props:['goods'],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.goods_list{
				padding: 0 15rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.goods_item{
					background: #fff;
					width: 355rpx;
					margin: 10px 0;
					padding: 15rpx;
					box-sizing: border-box;
					image{
						width: 80%;
						height: 150px;
						display: block;
						margin: 5px auto;
					}
					.price{
						color: $shop-color;
						font-size: 36rpx;
						text:nth-child(2){
							color: #ccc;
							font-size: 28rpx;
							margin-left: 17rpx;
							text-decoration: line-through;
						}
					}
					.name{
						font-size: 28rpx;
						line-height: 50rpx;
						padding-bottom: 15rpx;
						padding-top: 10rpx;
					}
				}
			}
		
</style>

看上边的代码，由于是 v-for 循环展示，所以需要接收 index.vue 中传过来的商品列表数据，所以用 props 接收 goods 数据

我们修改 index.vue，使用 import 引入刚才写的商品列表组件，然后在 components 中注册，最后在页面中使用，同时传入 goods 数据即可

<template>
	<view class="content">
		......
		<!--推荐商品-->
		<view class="hot_goods">
			<view class="title">推荐商品</view>
			<goods-list :goods='goods'></goods-list>
		</view>
	</view>
</template>

<script>
	import goodsList from '@/components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				......
			}
		},
		onLoad() {
			......
		},
		components:{
			'goods-list':goodsList
		},
		methods: {
			......
		}
	}
</script>

......

运行结果和之前一样

现在继续商品列表页，修改 goods.vue

<template>
	<view>
		<goods-list :goods='goods'></goods-list>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				goods:[]
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		components:{
			'goods-list':goodsList
		},
		methods: {
			async getGoodsList(){
				const res = await this.$myRequest({
					url:'/api/public/v1/goods/search',
					data:{
						query:'零食'
					}
				})
				this.goods = res.data.message.goods
			}
		}
	}
</script>

<style lang="scss">
.goods_list{
	background: #eee;
}
</style>

同时修改 pages.json，修改这个页面的标题：

{
	"pages": [
		......
        ,{
            "path" : "pages/goods/goods",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "商品列表"
            }
            
        }
    ],
	......
}

运行程序，点击 uni-商城即可跳转这个商品列表页：