【uni-app从入门到实战】商品列表

最新推荐文章于 2025-03-20 16:53:18 发布

Errol_King

最新推荐文章于 2025-03-20 16:53:18 发布

阅读量4.5k

点赞数 2

分类专栏： uni-app快速上手文章标签： uni-app 前端

本文链接：https://blog.csdn.net/u010356768/article/details/126739079

版权

本文档详细介绍了如何使用Vue.js来创建一个商品列表页面，包括导航栏的改造，点击事件处理，以及商品列表组件的创建。同时，讲解了如何实现商品列表的上拉加载更多功能，通过监听onReachBottom事件动态加载数据。此外，还涵盖了下拉刷新功能的实现，通过onPullDownRefresh事件重置数据并重新加载。整个过程旨在提升用户体验，提供流畅的滚动加载和刷新操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航改造

现在把导航的数据放入 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>
......