基于uniapp vue3.0 uView 做一个点单页面（包括加入购物车动画和左右联动）

已于 2024-04-30 15:31:00 修改
阅读量1.3k 收藏 6
点赞数 7
分类专栏： uniapp分享 文章标签： uni-app
于 2024-04-30 15:30:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49083276/article/details/138346318
版权

1、实现效果：

下拉有自定义组件（商品卡片、进步器、侧边栏等）源码

2、左右联动功能

使用scroll-view来做右边的菜单页，title的id动态绑定充当锚点

<scroll-view :scroll-into-view="toView" scroll-with-animation="true" class="main" @scroll="scroll" scroll-y>
				<view class="scroll_main">
					<view class="" v-for="(item,index) in list" :id="'type' + index">
						<view :id="'title' + index">
							<u-divider>{{item.meal_name}}</u-divider>
						</view>
						<card v-for="(item2,indax) in item.goods" :data="item2" @change="cardChange"></card>
					</view>
				</view>
			</scroll-view>

侧边栏组件点击事件，返回分类信息，根据分类的id，定位到scroll-view对应的title

<view class="nav">
				<left-nav :data="list" :current="current" @change="navChange"></left-nav>
			</view>
function navChange(e) {
		current.value = e
		getRightScrollDistance()
	}

 scroll-view属性@scroll用于监听scroll的滚动距离，注意用防抖（我用的是uView里自带的防抖方法），防止nav跳动

获取每个titile距离盒子顶部的距离，用于判断滚动距离是否超出某个分类

onReady(() => {
		list.value.forEach((item, index) => {
			uni.createSelectorQuery().select('#title' + index).boundingClientRect(data => {
				console.log(data);
				titleH.value.push(data)
			}).exec()
		})
	})

获取“this”:

const {
		appContext: {
			app: {
				config: {
					globalProperties
				}
			}
		}
	} = getCurrentInstance()
/* 菜单滚动监听 */
	function scroll(e) {
		//防抖
		globalProperties.$u.debounce(() => {
			console.log(e.detail.scrollTop);
			titleH.value.forEach((item, index) => {
				if ((e.detail.scrollTop + item.height) > item.top) {
					current.value = index
				}
			})
			scrollH.value = e.detail.scrollTop
		}, 100)

	}

3、加入购物车动画

购物车是固定的，我们得给它固定的id以便找到它

<view class="bottom">
			<view id="left_icon" class="left_icon" ref="cartBtn" @click="showPop = !showPop">
				<u-icon name="bag" size="80" color="#fff"></u-icon>
			</view>
			<view class="bottom_info">
				<view>共计：<text style="font-weight: bold;color: #FB3B26;">{{35}}</text>元</view>
				<view>已点：早餐、中餐、晚餐</view>
			</view>
			<view class="submit">
				确认预订
			</view>
		</view>
	</view>

定义移动小球的样式，写活它的初始位置

<!-- 小球 -->
	<view class="ball" v-if="showAnimation" :animation="animation"
		:style="{ top: ballTop + 'px', left: ballLeft + 'px' }">
	</view>
.ball {
		position: absolute;
		z-index: 1;
		width: 40rpx;
		height: 40rpx;
		background-color: red;
		border-radius: 50%;
	}

写活“+”号的id，以便我们获取实例

<view v-if="id" class="plus" :id="id" @click="addClick">
			<u-icon :name="plusIcon" size="32" color="#ffffff" :customStyle="iconStyle"></u-icon>
		</view>

 用uni.createAnimation()来制作动画，按钮的位置减去购物车的位置等于偏移的位置

/* 动画效果控制 */
	function addToCart(item) {
		const btn = '#id_' + item.id;
		const car = '.left_icon';
		console.log('#id_' + item.id);

		uni.createSelectorQuery().select(btn).boundingClientRect().exec((rect) => {
			const btnRect = rect[0];
			const left = btnRect.left;
			const top = btnRect.top;
			ballTop.value = top;
			ballLeft.value = left;
			uni.createSelectorQuery().select(car).boundingClientRect().exec((rect) => {
				console.log(rect);
				const carRect = rect[0];
				const x = carRect.left;
				const y = carRect.top;
				carTop.value = carRect.top;
				carLeft.value = carRect.left;
				animationData.value = uni.createAnimation()
				animationData.value.translate(x - left + 20, y - top).step({
					duration: 300,
				})
				animationTimeout.value
				clearTimeout(animationTimeout.value)
				animation.value = animationData.value.export()
				showAnimation.value = true;
				animationTimeout.value = setTimeout(() => {
					showAnimation.value = false;
				}, 300);
			});
		});
	}

4、代码

页面booking.vue

<template>
	<view class="booking">
		<view class="content">
			<view class="nav">
				<left-nav :data="list" :current="current" @change="navChange"></left-nav>
			</view>
			<scroll-view :scroll-into-view="toView" scroll-with-animation="true" class="main" @scroll="scroll" scroll-y>
				<view class="scroll_main">
					<view class="" v-for="(item,index) in list" :id="'type' + index">
						<view :id="'title' + index">
							<u-divider>{{item.meal_name}}</u-divider>
						</view>
						<card v-for="(item2,indax) in item.goods" :data="item2" @change="cardChange"></card>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="bottom">
			<view id="left_icon" class="left_icon" ref="cartBtn" @click="showPop = !showPop">
				<u-icon name="bag" size="80" color="#fff"></u-icon>
			</view>
			<view class="bottom_info">
				<view>共计：<text style="font-weight: bold;color: #FB3B26;">{{35}}</text>元</view>
				<view>已点：早餐、中餐、晚餐</view>
			</view>
			<view class="submit">
				确认预订
			</view>
		</view>
	</view>

	<!-- 弹出层 -->
	<u-popup v-model="showPop" mode="bottom" border-radius="20" closeable z-index="1">
		<scroll-view class="pop_main" scroll-y>
			<view class="pop_title">
				已选菜品
			</view>
			<view class="scroll_main">
				<view class="" v-for="(item,index) in list" :id="'type' + index">
					<view :id="'title' + index">
						<u-divider>{{item.meal_name}}</u-divider>
					</view>
					<card v-for="(item2,indax) in item.goods" :data="item2" @change="cardChange" :isAdd="false"></card>
				</view>
			</view>
		</scroll-view>
	</u-popup>

	<!-- 小球 -->
	<view class="ball" v-if="showAnimation" :animation="animation"
		:style="{ top: ballTop + 'px', left: ballLeft + 'px' }">
	</view>
</template>

<script setup>
	import leftNav from "@/components/booking/nav.vue"
	import card from "@/components/booking/card.vue"
	import {
		mockData
	} from "../binding/mock.js"
	import {
		getCurrentInstance,
		ref
	} from "vue";
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	onLoad(e => {
		mock.value = mockData
		list.value = mock.value.data.datas
		console.log(list.value);
	})
	onReady(() => {
		list.value.forEach((item, index) => {
			uni.createSelectorQuery().select('#title' + index).boundingClientRect(data => {
				console.log(data);
				titleH.value.push(data)
			}).exec()
		})
	})
	const showPop = ref(false)
	const animationData = ref()
	const animation = ref()
	const animationTimeout = ref()

	const titleH = ref([])

	const scrollH = ref(0)

	const toView = ref("")

	const current = ref(0)

	const mock = ref()

	const list = ref([{}])
	let ballTop = ref(0);
	let ballLeft = ref(0);
	let carTop = ref(0);
	let carLeft = ref(0);
	const showAnimation = ref(false);

	const {
		appContext: {
			app: {
				config: {
					globalProperties
				}
			}
		}
	} = getCurrentInstance()

	/* 菜单滚动监听 */
	function scroll(e) {
		//防抖
		globalProperties.$u.debounce(() => {
			console.log(e.detail.scrollTop);
			titleH.value.forEach((item, index) => {
				if ((e.detail.scrollTop + item.height) > item.top) {
					current.value = index
				}
			})
			scrollH.value = e.detail.scrollTop
		}, 100)

	}

	function cardChange(e) {
		addToCart(e)
	}

	function navChange(e) {
		current.value = e
		getRightScrollDistance()
	}

	function getRightScrollDistance() {
		toView.value = "title" + current.value;
	}

	/* 动画效果控制 */
	function addToCart(item) {
		const btn = '#id_' + item.id;
		const car = '.left_icon';
		console.log('#id_' + item.id);

		uni.createSelectorQuery().select(btn).boundingClientRect().exec((rect) => {
			const btnRect = rect[0];
			const left = btnRect.left;
			const top = btnRect.top;
			ballTop.value = top;
			ballLeft.value = left;
			uni.createSelectorQuery().select(car).boundingClientRect().exec((rect) => {
				console.log(rect);
				const carRect = rect[0];
				const x = carRect.left;
				const y = carRect.top;
				carTop.value = carRect.top;
				carLeft.value = carRect.left;
				animationData.value = uni.createAnimation()
				animationData.value.translate(x - left + 20, y - top).step({
					duration: 300,
				})
				animationTimeout.value
				clearTimeout(animationTimeout.value)
				animation.value = animationData.value.export()
				showAnimation.value = true;
				animationTimeout.value = setTimeout(() => {
					showAnimation.value = false;
				}, 300);
			});
		});
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.content {
		min-height: 100vh;
		display: flex;

		.nav {
			flex: 1;
			min-width: 164rpx;
			background-color: #F6F6F6;
		}

		.main {
			flex: 3.5;
			height: 100vh;
			background-color: #fff;

			.scroll_main {
				padding-bottom: 150rpx;
			}
		}
	}


	.bottom {
		position: absolute;
		z-index: 2;
		bottom: 0;
		width: 750rpx;
		height: 132rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 2rpx rgba(164, 164, 164, 0.11);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.bottom_info {
			flex: 1;
			margin: 0 20rpx;
			font-size: 26rpx;
			line-height: 40rpx;

			&>view:nth-child(2) {
				font-size: 24rpx;
				color: #aaa;
			}

		}

		.submit {
			color: #FFFFFF;
			padding: 10rpx 20rpx;
			background-color: #FB3B26;
			font-size: 26rpx;
			border-radius: 30rpx;
			margin-right: 50rpx;
		}

		#left_icon {
			margin-top: -30rpx;
			margin-left: 40rpx;
			width: 120rpx;
			height: 120rpx;
			background: #FB3B26;
			border-radius: 40rpx;
			line-height: 150rpx;
			text-align: center;
		}
	}

	.ball {
		position: absolute;
		z-index: 1;
		width: 40rpx;
		height: 40rpx;
		background-color: red;
		border-radius: 50%;
	}


	.pop_main {
		position: relative;
		max-height: 60vh;
		padding-top: 100rpx;
		padding-bottom: 150rpx;

		&>.pop_title {
			text-align: center;
			width: 100vw;
			height: 100rpx;
			font-size: 32rpx;
			font-weight: bold;
			position: fixed;
			top: 0;
			z-index: 1;
			background-color: #fff;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>

侧边栏组件nav.vue

<template>
	<view class="nav_main">
		<view v-for="(item,index) in data" :class="{'tool-box':true,'item':true,'item_act':current==index}"
			@click="change(index)">
			{{item.meal_name}}
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(['change'])
	const props = defineProps({
		data: {
			type: Array,
			default: () => ([])
		},
		current: {
			type: Number,
			default: () => (0)
		},
	});

	function change(index) {
		emit('change', index) // 当前值 + 进步值
	}
</script>

<style scoped lang="scss">
	.nav_main {
		position: fixed;
	}

	.item {
		width: 164rpx;
		text-align: center;
		padding: 30rpx 0;
		font-size: 26rpx;
		color: #000000;
		font-weight: 400;
		position: relative;


	}

	.item_act {
		background-color: #fff;
		font-size: 26rpx;
		font-weight: 700;

		&::before {
			content: "";
			display: inline-block;
			width: 12rpx;
			height: 34rpx;
			background: #FC4E3E;
			border-radius: 0rpx 30rpx 30rpx 0rpx;
			position: absolute;
			left: 0;
		}
	}
</style>

商品卡片组件card.vue

<template>
	<view class="card_body">
		<view class="image">

		</view>
		<view class="foods_info">
			<view>{{data.name}}</view>
			<view></view>
			<view>
				<view class="">
					￥{{data.price}}
				</view>
				<counter v-if="isAdd" :id="'id_' + data.id" :number="data.number ?? 0" @change-click="change"></counter>
			</view>
		</view>
	</view>
</template>

<script setup>
	import counter from "@/components/booking/counter.vue"
	const emit = defineEmits(['change'])

	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		},
		isAdd: {
			type: Boolean,
			default: () => true
		}
	});

	function change(e) {
		let obj = props.data
		obj.number = e
		console.log(obj);
		emit('change', obj)
	}
</script>

<style scoped lang="scss">
	.card_body {
		display: flex;
		margin: 30rpx 20rpx;

		.image {
			width: 180rpx;
			height: 180rpx;
			background-color: #a1a1a1;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.foods_info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;

			&>view:nth-child(1) {
				font-weight: 700;
				font-size: 28rpx;
				color: #000000;
			}

			&>view:nth-child(3) {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				justify-content: space-between;
			}
		}
	}
</style>

进步器组件counter.vue

<template>

	<view class="counter">
		<u-icon v-if="number>0" :name="reduceIcon" size="60" color="#8E8E8E" @click="reduceClick"></u-icon>
		<input v-if="number>0" type="number" :value="number" @blur="inputBlurEvent" @input="inputChangeEvent"
			:disabled="disabled">
		<view v-if="id" class="plus" :id="id" @click="addClick">
			<u-icon :name="plusIcon" size="32" color="#ffffff" :customStyle="iconStyle"></u-icon>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		nextTick
	} from "vue";
	const props = defineProps({
		id: {
			type: String,
			default: ""
		},
		disabled: {
			type: Number,
			default: false
		},
		number: {
			type: Number,
			default: 0
		},
		maxNumber: {
			type: Number,
			default: 99999
		},
		minNumber: {
			type: Number,
			default: 0
		},
		progressValue: {
			type: Number,
			default: 1
		},
		reduceIcon: {
			type: String,
			default: "minus-circle"
		},
		plusIcon: {
			type: String,
			default: "plus"
		}
	})
	const temp = computed(() => {
		return props.number
	})
	const iconStyle = reactive({
		fontWeight: 'blod'
	})
	const emit = defineEmits(['change-click'])
	// 加
	function addClick(ev) {
		emit('change-click', props.number + props.progressValue) // 当前值 + 进步值
	}
	// 减
	function reduceClick() {
		if (props.number <= props.minNumber) {
			console.log("不能继续减少啦 ~");
			return;
		}
		if ((props.number - props.progressValue) < props.minNumber) {
			console.log("不能继续减少");
			return;
		}
		// 3、执行 减操作
		emit('change-click', props.number - props.progressValue)
	}

	function inputBlurEvent(e) {
		let number = parseInt(e.detail.value)
		if (isNaN(number) || number === 0) {
			emit('change-click', 0)
			return;
		}


		// 条件：输入数不为进步值的倍数，则往前取成倍数值
		let multipie = Math.ceil(number / props.progressValue) // 获取倍数
		number = multipie * props.progressValue // 向上获取最近的倍数
		if (number > props.maxNumber) {
			number = props.maxNumber
			emit('change-click', number)
		} else if (number <= props.minNumber) {
			emit('change-click', props.minNumber)
		} else {
			emit('change-click', number)
		}
	}

	function inputChangeEvent(e) {
		// 限制输入在最大与最小值之间
		// 注意：因为都是赋值最大或最小值，所以会出现值复用无法重新渲染页面的情况（第一次能重新渲染，之后的都不渲染）：已解决
		let number = parseInt(e.detail.value)
		if (isNaN(number) || number === 0) {
			// 为空为0
			return
		}
		if (number > props.maxNumber) {
			emit('change-click', props.maxNumber)
		} else if (number <= props.minNumber) {
			emit('change-click', props.minNumber)
		} else {
			emit('change-click', number)
		}
	}
</script>

<style lang="scss" scoped>
	.counter {
		display: flex;
		align-items: center;

		&>input {
			width: 2em;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: bold;
			color: #000000;
			flex: 1;
			text-align: center;
		}

		.plus {
			margin: 8rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			background: #FF3232;

			display: flex;
			justify-content: center;
			align-items: center;

			&>image {
				width: 32rpx;
				height: 30rpx;
				margin-right: 5rpx;
			}
		}
	}
</style>

模拟数据mock.js

const mockData = {
	"code": 200,
	"msg": "",
	"data": {
		"datas": [{
				"meal_id": 5,
				"meal_name": "早餐",
				"meal_type": 1,
				"goods": [{
						"id": 4,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 5,
						"name": "馒头",
						"price": "2.00",
						"img": "http://192.168.1.23:9508/campus_pay_resource/goods/f82315767e959b536f64b0a199f99eb5.png"
					},
					{
						"id": 6,
						"name": "手抓饼",
						"price": "6.00",
						"img": "http://192.168.1.23:9508/campus_pay_resource/goods/9370838db9f50a2e950070995975e3b7.png"
					}
				]
			},
			{
				"meal_id": 5,
				"meal_name": "午餐",
				"meal_type": 1,
				"goods": [{
						"id": 7,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 8,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 9,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 10,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 11,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 12,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 13,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 14,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 15,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 16,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 17,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 18,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 19,
						"name": "馒头",
						"price": "2.00",
						"img": "http://192.168.1.23:9508/campus_pay_resource/goods/f82315767e959b536f64b0a199f99eb5.png"
					},
					{
						"id": 20,
						"name": "手抓饼",
						"price": "6.00",
						"img": "http://192.168.1.23:9508/campus_pay_resource/goods/9370838db9f50a2e950070995975e3b7.png"
					}
				]
			},
			{
				"meal_id": 5,
				"meal_name": "晚餐",
				"meal_type": 1,
				"goods": [{
						"id": 21,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 22,
						"name": "馒头",
						"price": "2.00",
						"img": "http://192.168.1.23:9508/campus_pay_resource/goods/f82315767e959b536f64b0a199f99eb5.png"
					},
					{
						"id": 23,
						"name": "手抓饼",
						"price": "6.00",
						"img": "http://192.168.1.23:9508/campus_pay_resource/goods/9370838db9f50a2e950070995975e3b7.png"
					}
				]
			},
			{
				"meal_id": 5,
				"meal_name": "宵夜",
				"meal_type": 1,
				"goods": [{
						"id": 24,
						"name": "牛奶",
						"price": "3.00",
						"img": ""
					},
					{
						"id": 25,
						"name": "馒头",
						"price": "2.00",
						"img": "http://192.168.1.23:9508/campus_pay_resource/goods/f82315767e959b536f64b0a199f99eb5.png"
					},
					{
						"id": 26,
						"name": "手抓饼",
						"price": "6.00",
						"img": "http://192.168.1.23:9508/campus_pay_resource/goods/9370838db9f50a2e950070995975e3b7.png"
					}
				]
			}
		],
		"school_name": "测试学校"
	}
}

export {
	mockData
}

printf_824
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
一个基于vue3.0的大数据分析系统，包含各种echarts和vue3.0新API-Vue.js开发
05-27
vue3-bigData是一个可视化系统，基于vue3.0 和 echarts实现，使用vue的最新的技术栈，包括各种可视化图表。 vue3-bigData 探索本项目的文档 » 在线预览 · 提出Bug · 提出新特性 简介 vue3-bigData是一个...
一个基于vue3.0的大数据分析系统，包含各种echarts和vue3.0新API.zip
03-04
一个基于vue3.0的大数据分析系统，包含各种echarts和vue3.0新API.zip
Vue 实现左右联动（超详细！！！！）
爱拼才会赢～的博客
03-31 5835
下面为大家分享一篇文章，vue实现左右联动，没有使用任何插件，这篇主要亮点在于右边滚动部分的标题，已用颜色标明，请看下图： 标题这篇文章的中心思想呢，就是通过一个变量来控制两个盒子的显示与隐藏（一个是“吸顶的红框”，另一个是“脱离吸顶的红框”） 1.先获取右边每一模块的高度 getBoxHeight() { let rightTitHeight = (this.rightTitHeight = this.$refs.rightTit.length ? this.$refs.rightT.
uni-app加入购物车动画效果
郑州彭于晏
03-04 3467
index.vue <template> <view class="content"> <view class="list"> <view class="item flex" v-for="(d,i) in shops" :key="i"> <view class="il flexs"> <image :src="d.img" mode="widthFix"></image> &lt
uniapp/微信小程序实现加入购物车点击添加飞到购物车动画
最新发布
Honiler的博客
05-06 541
1. 为每个点击元素设置不同的class，才能通过uni.createSelectorQuery来获取每个元素的节点信息；每次点击添加按钮时，往该按钮上方添加一个悬浮元素，通过位移动画将元素移到目标位置。4. 计算动画元素到目标位置的距离，获得xy坐标执行位移动画；3. 获取点击元素的节点信息将动画元素放置到点击元素上方；5. 等待每个动画元素执行动画完毕后移除该元素。2. 添加一个与点击元素一模一样的动画元素；
uniapp配置uView3.0与使用iconfont
weixin_52479803的博客
03-13 1368
uniapp配置uView3.0与使用iconfont
uniapp实现购物车功能
热门推荐
pumpkin_truck的博客
09-07 1万+
uniapp实现购物车功能 周六我看见一个有个公司招聘需要试岗3天，并使用uniapp完成购物车，直播间，地图，首页四个功能方能通过，于是乎，我趁手上没事就打算自己写一遍，虽然我的项目没用到，但是多掌握点总没错。今天就来第一个——购物车 因为没写接口，上面的数据我都是使用的模拟数据搭建而成，主要实现的是它件数的增加减少与支付总价格的逻辑关系，还有左边的全选和全不选。 首先第一步，我们把页面先搭建出来 <template> <view> //购物车没商品出现的页面 <v
uniapp使用uview组件实现省市区三级联动
06-29
uniapp使用uview组件实现省市区三级联动； 文件下载后，需要在项目中引入uview组件方可使用； 数据附带在文件中
配置一个vue3.0项目的完整步骤
10-17
主要介绍了配置一个vue3.0项目的完整步骤，从0开始配置一个vue项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3.0配置多页面应用
03-17
Vue3.0配置多页面应用源码
uni-app 使用uView详解，避免忘记记录一下
weixin_56646209的博客
05-05 1075
文件下style添加以下代码，引入uView scss的基础样式。6.在页面上使用uView组件。2.根据官方文档的提示，在。1.安装uview。
uniapp联动左侧导航栏分类？
zybijiso666的博客
12-09 752
【代码】uniapp联动左侧导航栏分类？
微信小程序开发一个小型商城（六、购物车页面）
共勉
04-14 1万+
上一篇文章：微信小程序开发一个小型商城（五、商品详情） 当我们在商品详情界面中点击添加购物后，会跳转到购物车界面，购物车界面是一个tabbar，在跳转的时候需要加上ope-type。看下购物车的静态页面把：如下图 页面分析：在最上面需要获取收货地址：当存在则显示信息，不存在的时候显示一个按钮表示要用户授权。下面是类似与goodlist的一个个的小商品块，再下面就类似与goods_detail当中...
uni-app ——小程序购物车基本功能的实现过程
Bonsoir777的博客
11-14 1387
本文主要介绍如何使用uni-app实现基本的购物车功能
uni-app微信小程序——商城（8）——订单详情
徐小硕—心之所向，素履以往
08-21 7917
我们上一篇文章中写到了商品详情页的设计和实施，本篇文章讲述了订单详情，订单详情无非就是对商品的几种状态进行分类，参考某宝，把商品分为待付款、待发货、待收货、已完成等几种状态，然后使用VantWeapp组件中的“Tab 标签页”对其状态进行分类，然后使用“Card 商品卡片”组件将商品展示到对应的标签页下。 效果图如下： 在“Card 商品卡片”中使用了一个tag插槽在右上角使用不用的颜色和文字来标明该商品 ...
uniapp 联动侧边栏导航分类(完整版2)
Lucky铂爵
06-20 5164
<template> <view class="container"> <!-- 顶部面板 --> <view class="top--panel"> <!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 --> <view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;col
uniapp 开发小程序购物车
weixin_38946164的博客
12-09 2891
效果：增加数量不做限制，减少数量到0的时候从购物车中删除商品。 购物车数组结构： html <!-- 底部购物车 --> <view class="car"> <view class="car-left"> <view class="car-pice">¥{{totalPrice}}</view> </view> <view class="car-right"> <view class="car-te
微信小程序实现购物车页面
qsj0606的博客
01-27 8231
微信小程序实现购物车页面 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品。当购物车为空时，页面会变为空购物车的布局 根据设计图，我们可以先实现静态页面。接下来，再看看一个购物车需要什么样的数据。 首先是一个商品列表(carts)，列表里的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id) 然后左下角的全选，需要一个字段(selectAllStatus)表
左侧导航栏分类 ---联动版本
A12536365214的博客
12-10 154
在uni-app中实现左侧导航栏与右侧内容的联动效果，主要涉及两个部分：左侧的导航栏（通常为垂直列表）和右侧的内容区域。当用户点击左侧某个分类时，右侧的内容区域应滚动到相应的位置；同时，当右侧内容滚动时，左侧的导航栏也应相应地显示当前的活动分类。
用java基于springboot框架加上ts基于vue3.0框架写一个坦克大战
07-11
很高兴回答你的问题！要使用Java基于Spring Boot框架加上TypeScript基于Vue 3.0框架来编写坦克大战游戏，你可以按照以下步骤进行： 1. 创建后端项目： - 使用Spring Initializr创建一个新的Spring Boot项目。 - 添加所需的依赖，如Spring Web和Spring WebSocket，这些将用于处理游戏逻辑和与前端通信。 2. 创建前端项目： - 使用Vue CLI创建一个新的Vue 3.0项目。 - 安装Vue Router和Vuex等必要的依赖，以便管理路由和状态。 3. 设计游戏逻辑： - 定义坦克和其他游戏元素的数据结构，如位置、方向和生命值等。 - 实现游戏规则和逻辑，包括玩家和敌人的移动、碰撞检测、射击等。 4. 实现后端功能： - 创建WebSocket端点，用于与前端进行实时通信。 - 处理前端发送的游戏操作请求，并将结果广播给所有连接的客户端。 5. 实现前端功能： - 创建游戏场景和画布，用于显示游戏元素。 - 使用Canvas API绘制坦克、子弹和其他游戏元素。 - 使用WebSocket与后端建立连接并接收游戏状态更新。 6. 联调并测试： - 启动后端和前端项目。 - 确保前后端正常通信，游戏状态能够实时同步。 - 测试游戏各项功能，如移动、射击、碰撞等。 这个过程中可能会涉及到更多的细节和技术选择，但这个步骤将为你提供一个基本的框架来实现坦克大战游戏。祝你编写愉快！如果你有任何进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值