uniapp 仿喜茶小程序前端模板（支持小程序、网页、app）

最新推荐文章于 2024-08-20 09:45:33 发布

青衫折扇

最新推荐文章于 2024-08-20 09:45:33 发布

阅读量1.8k

点赞数 2

文章标签： uni-app 小程序前端

本文链接：https://blog.csdn.net/qq_42543264/article/details/133924705

版权

uniapp仿喜茶小程序前端模板

兼容：网页、app、小程序

部分截图

部分代码

<template>
	<view class="">
		<uy-swiper :list="slideshowList" :height="275" :isIndicatorLight="false"></uy-swiper>
		
		<view class="uy-m-l-30 uy-m-r-30 uy-m--t-30">
			<view class="uy-rel uy-bg-ffffff z-index1 uy-b-r-20 uy-flex uy-h-370 uy-flex-around uy-bs-000000">
				<view class="" v-for="(item,index) in $mConstDataConfig.indexList1" :key="index" @tap="$openPage({name: item.url, query: item.params})">
					<view class="uy-w-m uy-m-a">
						<uy-image width="120" height="120" :src="item.icon"></uy-image>
					</view>
					<view class="uy-text-c uy-m-10 uy-font-36 uy-font-w-600">{{item.name || ''}}</view>
					<view class="uy-text-c uy-font-24 uy-m-10">{{item.desc || ''}}</view>
				</view>
				<view class="uy-abs uy-l-0 uy-r-0 uy-m-a uy-w-1 uy-height-280 uy-bg-F2F2F2"></view>
			</view>
			
			<view class="uy-flex uy-flex-between uy-m-t-30 uy-h-146">
				<view class="uy-flex-1 uy-h-i  uy-m-r-20 uy-bg-EAEBEC uy-b-r-20 uy-flex uy-flex-center uy-m-l-r" v-for="(item,index) in $mConstDataConfig.indexList2" :key="index">
					<view class="">
						<view class="uy-flex uy-flex-center">
							<uy-image width="48" height="48" :src="item.icon"></uy-image>
							<view class="uy-m-l-10">{{item.name || ''}}</view>
						</view>
						<view class="uy-color-AAAAAA uy-font-24 uy-m-t-10 uy-text-c">{{item.desc || ''}}</view>
					</view>
				</view>
			</view>
			
			<view class="uy-flex uy-flex-between uy-h-130 uy-m-t-30">
				<view class="uy-w-p-78" @tap="$openPage('integralMall')">
					<view>我的积分 22</view>
					<view class="uy-font-24 uy-m-t-16 uy-color-7F7F7F">可兑换喜茶券和丰富灵感周边</view>
				</view>
				<view class="uy-w-p-22 uy-text-c uy-br-F2F2F2-l" @tap="$openPage('userCode')">
					<view class="uy-w-m uy-m-a">
						<uy-image width="48" height="48" :src="$mAssetsPath.index5"></uy-image>
					</view>
					<view class="uy-font-24 uy-m-t-10 uy-color-7F7F7F">会员码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slideshowList: [{
					image: '/static/img/banner1.png'
				}, {
					image: '/static/img/banner2.png'
				}, {
					image: '/static/img/banner3.png'
				}]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

可二开，可扩展，可学习

需要的可扫码微信小程序下载即可

或微信搜索【源空间】