uniapp 商城实例

90 阅读 0 评论 60 点赞

我是靠谱客的博主精明发夹，最近开发中收集的这篇文章主要介绍uniapp 商城实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

项目代码链接:https://www.aliyundrive.com/s/1Sj4nT9aJMc

首页效果

goods页面

contact页面

pics页面

news页面

商品详情页面

创建api.js

// 封装get请求
const baseUrl = "http://localhost:8082"
export const myRequest = (options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			method: options.method,
			data: options.data,
			url: baseUrl+options.url,
			success(res) {
				if(res.data.status !== 0) {
					return uni.showToast({
						title: '获取数据失败'
					})
				}
				resolve(res)
			},
			fail(err) {
				uni.showToast({
					title: '获取数据失败'
				})
				reject(err)
			}
		})
	})
}

要在main.js中挂载到全局才可以使用

import { myRequest } from './util/api.js'
Vue.prototype.$myRequest = myRequest

获取数据把数据渲染方法 async await 然后挂载到onLoad

例轮播图

methods: {
  async getSwipers () {
    const res = await this.$myRequest({
      method: 'GET',
      url: '/api/getlunbo'
    })
    this.swipers = res.data.message
  }
}
onLoad(){
getSwipers()}

实现上拉加载

通过onReachBottom来监听触底

onReachBottom () {
  this.pageindex++
  this.getGoods()
}

实现下拉刷新

通过onPullDownRefresh进行下拉刷新的操作

onPullDownRefresh() {
  this.goods = []
  this.pageindex = 1
  this.flag = false 
  setTimeout(()=>{
    this.getGoods(()=>{
      uni.stopPullDownRefresh()
    })
  },1000)
}