uni-app仿美团美食团购轮播

原创已于 2023-08-29 10:26:54 修改 · 549 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #美食 #数学建模

于 2023-06-09 00:05:00 首次发布

该代码示例展示了如何在uni-app中创建一个仿美团美食团购的轮播效果，包括搜索框、分类标签和商品展示。通过触屏手势处理左右滑动，实现商品图片的无缝切换，同时提供了商品详情和价格优惠信息。

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

uni-app仿美团美食团购轮播

代码

<template>
	<view>
		<view style="display: flex;align-items: center;margin: 20rpx;">
			<text style="font-weight: bold;white-space: nowrap;margin-right: 20rpx;">饮品/甜品</text>
			<view style="width: 100%;">
				<view style="width: 100%;display: flex;background-color: #fff;border-radius: 30rpx;display: flex;align-items: center;padding: 10rpx;">
					<u-icon name="search" style="margin-right: 10rpx;"></u-icon>
					<input style="width: 100%;" placeholder="请输入商家名或商品名称" />
				</view>
			</view>
		</view>
		<view style="background-color: #fff;border-radius: 25rpx;padding: 20rpx;margin: 25rpx;">
			<view style="display: flex;justify-content: space-between;padding: 0 0;">
				<text style="font-weight: bold;margin-bottom: 10rpx;">附近都在喝</text>
				<view style="display: flex;align-items: center;color: orangered;">
					<text>查看更多</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view style="background-color: #fff;position: relative;height: 350rpx;
    overflow: hidden;">
				<view style="display: flex;overflow: hidden;position: absolute;"  :style="{'left':marginLeft+'rpx'}">
					<view @touchstart="touchstart" @touchend="touchend($event,index)"  class="item" :style="{'border':index == currentIndex?'':'2rpx solid #eee','margin-right':index == currentIndex?'10rpx':'10rpx','width':index == currentIndex?'440rpx':'170rpx','overflow':index == currentIndex?'':'hidden','transition':isAnimation?'all .3s':''}" v-for="(item,index) in list" style="display: flex;overflow: hidden;border-radius: 15rpx;">
						<view :style="{'transition':isAnimation?'all .3s':''}" style="display: flex;font-size: 25rpx;">
							<view style="margin-right: 10rpx;position: relative;">
								<image style="width: 170rpx;height: 250rpx;border-radius: 10rpx;" :src="item.image"></image>
								<view v-if="index != currentIndex" style="position: absolute;left: 0;bottom: 0;display: flex;flex-direction: column;background-color: #fff;width: 100%;padding: 0 0;">
									<text style="font-weight: bold;text-align: center;margin-bottom: 5rpx;">青山白柚...</text>
									<view style="display: flex;align-items: center;color: orangered;margin-bottom: 7rpx;">
										<text style="font-size: 20rpx;font-weight: bold;">￥</text>
										<text style="font-size: 25rpx;font-weight: bold;">11.25</text>
										<view style="border: 2rpx solid orangered;border-radius: 5rpx;padding: 0 5rpx;margin-left: 5rpx;">
											7.5折
										</view>
									</view>
								</view>
							</view>
							<view style="white-space: nowrap;background-color: #f5f5f5;padding: 20rpx;margin-left: -10rpx;margin-top: 20rpx;height: calc(100% - 20rpx);padding-left: 7rpx;">
								<view style="display: flex;flex-direction: column;">
									<text style="font-weight: bold;font-size: 30rpx;">爆品冷萃茶2选1</text>
									<text style="color: gray;white-space: nowrap;">茶百道（金山枫泾古...</text>
								</view>
								<view style="background-color: orangered;color: #fff;width: fit-content;padding: 5rpx;border-radius: 10rpx;margin-top: 10rpx;">
									<text>回头客多</text>
								</view>
								<view style="display: flex;margin-top: 10rpx;align-items: center;">
									<view style="font-size: 30rpx;color: orangered;">
										<text style="font-size: 25rpx;">￥</text>
										<text style="font-size: 30rpx;">6.66</text>
									</view>
									<view style="border-radius: 5rpx;color: orangered;border: 2rpx solid orangered;padding: 5rpx;margin: 0 10rpx;">8.4折</view>
									<view style="text-decoration: line-through;color: gray;">￥8</view>
								</view>
							</view>
						</view>
					<!-- 	<view style="display: flex;flex-direction: column;width: 200rpx;" v-else>
							<view style="margin-right: 10rpx;">
								<image style="width: 150rpx;height: 200rpx;border-radius: 10rpx;" :src="item.image"></image>
							</view>
							<view>
								<text>青山白柚...</text>
								<view>
									<view style="font-weight: bold;color: orangered;">
										<text>￥</text>
										<text>11.25</text>
										<view>7.5折</view>
									</view>
								</view>
							</view>
						</view> -->
					</view>
				</view>
				<!-- <u-swiper :list="list"></u-swiper> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAnimation:true,
				currentIndex:1,
				marginLeft:-175,
				originList: [{
						id:0,
						image: 'https://img0.baidu.com/it/u=4147813612,122739285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
						title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
					},{
						id:0,
						image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.2C5SSJ3NYLOT3Jr6xeUj8gHaLH?w=186&h=279&c=7&r=0&o=5&pid=1.7',
						title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
					},
					{
						id:1,
						image: 'https://img2.baidu.com/it/u=2818603572,2916403253&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
						title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
					},
					{
						id:2,
						image: 'https://img.zcool.cn/community/01dd5a5e4ccad5a80120a895c06cc9.jpg@1280w_1l_2o_100sh.jpg',
						title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
					}
				],
				list: [{
						id:0,
						image: 'https://img0.baidu.com/it/u=4147813612,122739285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
						title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
					},{
						id:0,
						image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.2C5SSJ3NYLOT3Jr6xeUj8gHaLH?w=186&h=279&c=7&r=0&o=5&pid=1.7',
						title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
					},
					{
						id:1,
						image: 'https://img2.baidu.com/it/u=2818603572,2916403253&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
						title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
					},
					{
						id:2,
						image: 'https://img.zcool.cn/community/01dd5a5e4ccad5a80120a895c06cc9.jpg@1280w_1l_2o_100sh.jpg',
						title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
					}
				],
				startX:0
			}
		},
		methods: {
			touchstart(e) {
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX=e.touches[0].clientX;
				}
				console.log(e,'touchstart------')
			},
			touchend(e,index) {
				console.log(index,'-----')
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					let diff = endX-this.startX;
					if(Math.abs(diff)>20){
						if(diff>0){
							console.log("左滑...");
							if(index==1) { 
								this.marginLeft += 175
								this.currentIndex -= 1
								setTimeout(() => {
									this.isAnimation = false
									let list = this.originList
									// list.pop() 
									this.list = list.concat(list)
									this.marginLeft = -(list.length)*183
									
									console.log(this.marginLeft,'--',list)
									this.currentIndex = list.length
									this.$nextTick(() => {
										setTimeout(() => {
											this.isAnimation = true
										},300)
									})
								},300)
							} else {
								this.marginLeft += 183
								this.currentIndex -= 1
							}
						}else{
							// this.currentIndex = this.list[this.list.findIndex(item => {return item.id==index})+1].id
							if(index==this.list.length-2) {
								this.marginLeft -= 180
								this.currentIndex += 1
								setTimeout(() => {
									this.isAnimation = false
									let list = this.originList
									// list.pop() 
									this.list = list.concat(list)
									this.marginLeft = -(list.length-2)*180
									
									console.log(this.marginLeft,'--',list)
									this.currentIndex = list.length-2
									this.$nextTick(() => {
										setTimeout(() => {
											this.isAnimation = true
										},300)
									})
								},300)
							} else {
								this.marginLeft -= 182
								this.currentIndex += 1
							}
							console.log("右滑...");
						}
						// if(index == 0) {
						// 	this.list.unshift(this.list[this.list.length-1])
						// 	this.list.pop()
						// }
						// console.log('--------',this.marginLeft)
					}
				}
				console.log(e,'touchend------')
			}
		}
	}
</script>

<style>

</style>