uniapp 仿喜茶小程序前端模板(支持小程序、网页、app)
  zsamATBtEAEu 2023年11月02日 22 0


uniapp仿喜茶小程序前端模板

兼容:网页、app、小程序

部分截图

uniapp 仿喜茶小程序前端模板(支持小程序、网页、app)_ico

uniapp 仿喜茶小程序前端模板(支持小程序、网页、app)_前端_02

uniapp 仿喜茶小程序前端模板(支持小程序、网页、app)_uni-app_03

uniapp 仿喜茶小程序前端模板(支持小程序、网页、app)_小程序_04

 部分代码

<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>

可二开,可扩展,可学习



【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  anLrwkgbyYZS   2023年12月30日   33   0   0 ideciciMaxideMax
zsamATBtEAEu