[添加] 公共样式文件

[优化] 优化首页样式

App.vue

@@ -17,5 +17,47 @@
 	@import './colorui/main.css';
 	@import './colorui/icon.css';
 	@import "@/colorui/animation.css";
+	@import '@/common/styles/common.css';
 	/*每个页面公共css */
+	
+	// loading加载
+	.loading-more {
+		align-items: center;
+		justify-content: center;
+		padding-top: 10px;
+		padding-bottom: 10px;
+		text-align: center;
+		font-size: 28rpx;
+		color: #999;
+	}
+	.loading-more-text::before {
+		content: '';
+		width: 20px;
+		height: 20px;
+		display: inline-block;
+		vertical-align: middle;
+		-webkit-animation: weuiLoading 1s steps(12, end) infinite;
+		animation: weuiLoading 1s steps(12, end) infinite;
+		background-repeat: no-repeat;
+		background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
+		background-size: 100%;
+	}
+	@-webkit-keyframes weuiLoading {
+		0% {
+			transform: rotate3d(0, 0, 1, 0deg);
+		}
+	
+		100% {
+			transform: rotate3d(0, 0, 1, 360deg);
+		}
+	}
+	@keyframes weuiLoading {
+		0% {
+			transform: rotate3d(0, 0, 1, 0deg);
+		}
+	
+		100% {
+			transform: rotate3d(0, 0, 1, 360deg);
+		}
+	}
 </style>

main.js

@@ -20,7 +20,11 @@ Vue.component('mescroll-body', MescrollBody)
 
 //骨架屏
 import Skeleton from './components/my-uni-skeleton/index.vue'
-Vue.component('skeleton', Skeleton)
+Vue.component('skeleton', Skeleton);
+
+// 无数据
+import myNocontent from './components/my-nocontent/my-nocontent.vue';
+Vue.component('my-nocontent', myNocontent);
 
 // //金融数字
 // import aMount from './components/amount/index.vue'

pages.json

@@ -6,7 +6,8 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "首页"
+				"navigationBarTitleText": "首页",
+				"enablePullDownRefresh": true
 			}
 		},
 		{

pages/goodsDetail/goodsDetail.vue

@@ -0,0 +1,25 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	
+</style>

pages/index/index.vue

@@ -1,70 +1,33 @@
 <template>
-	<view class="content">
+	<view class="lf-row-center lf-flex-column">
 		<view class="ctab">
-			<u-tabs :list="list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
+			<u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
 		</view>
-		<view class="com">
-			<view class="list">
+		<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tabIndex">
+			<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="index">
 				<view class="left">
 					<image src="../../static/tu.png" mode=""></image>
 				</view>
 				<view class="right">
-					<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
-					<view class="tips">
+					<view class="lf-line-2 title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
+					<view class="lf-row-between tips">
 						<view class="u-line-progress">
 							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
 						</view>
 						<text class="progress">已抢25%</text>
 						<text class="bought">2.4万人已购买</text>
 					</view>
-					<view class="price">
+					<view class="lf-row-between price">
 						<text>￥</text><text>19</text>.<text>90</text>
 						<text>￥39.00</text>
 						<button>立即抢购</button>
 					</view>
 				</view>
 			</view>
-			
-			<view class="list">
-				<view class="left">
-					<image src="../../static/tu.png" mode=""></image>
-				</view>
-				<view class="right">
-					<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
-					<view class="tips">
-						<view class="u-line-progress">
-							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
-						</view>
-						<text class="progress">已抢25%</text>
-						<text class="bought">2.4万人已购买</text>
-					</view>
-					<view class="price">
-						<text>￥</text><text>19</text>.<text>90</text>
-						<text>￥39.00</text>
-						<button>立即抢购</button>
-					</view>
-				</view>
-			</view>
-			
-			<view class="list">
-				<view class="left">
-					<image src="../../static/tu.png" mode=""></image>
-				</view>
-				<view class="right">
-					<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
-					<view class="tips">
-						<view class="u-line-progress">
-							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
-						</view>
-						<text class="progress">已抢25%</text>
-						<text class="bought">2.4万人已购买</text>
-					</view>
-					<view class="price">
-						<text>￥</text><text>19</text>.<text>90</text>
-						<text>￥39.00</text>
-						<button>立即抢购</button>
-					</view>
-				</view>
+			<!-- 加载 -->
+			<view class="loading-more">
+				<text v-if="tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
+				<my-nocontent v-else></my-nocontent>
 			</view>
 		</view>
 	</view>
@@ -73,23 +36,43 @@
 <script>
 	export default {
 		data() {
+			let shared = {
+				loadingClass: false,
+				loadingText: '没有更多数据啦~',
+				page: 1,
+				isPage: true
+			}
 			return {
-				list: [{
-					name: '推荐'
+				tab_list: [{
+					name: '推荐',
+					list: [1, 2, 3],
+					...shared
 				}, {
-					name: '每日必抢'
+					name: '每日必抢',
+					list: [],
+					...shared
 				}, {
-					name: '生活用品'
+					name: '生活用品',
+					list: [1],
+					...shared
 				},{
-					name: '家政服务'
+					name: '家政服务',
+					list: [],
+					...shared
 				},{
-					name: '美食部落'
+					name: '美食部落',
+					list: [],
+					...shared
 				},{
-					name: '奶茶夏日'
+					name: '奶茶夏日',
+					list: [],
+					...shared
 				},{
-					name: '奶茶夏日'
+					name: '奶茶夏日',
+					list: [],
+					...shared
 				}],
-				current: 0
+				current: 0, // tab下表
 			}
 		},
 		onLoad() {
@@ -99,49 +82,31 @@
 			change(index) {
 				this.current = index;
 			},
+		},
+		onReachBottom(){
+			console.log("页面触底")
+		},
+		onPullDownRefresh(){
+			console.log("下拉刷新");
+			uni.stopPullDownRefresh()
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 100rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
 	
 	.title {
 		font-size: 28rpx;
 		color: $u-content-color;
 	}
 	
-	.button-demo {
-		margin-top: 80rpx;
-	}
-	
-	.link-demo {
-		margin-top: 80rpx;
-	}
+	// tab
 	.ctab{
 		width: 100%;
 		margin: 20rpx 0  0rpx 0rpx;
 		padding: 0 22rpx;
 	}
+	// 商品列表
 	.com{
 		width: 100%;
 		overflow: hidden;
@@ -151,9 +116,9 @@
 			margin: 20rpx 32rpx;
 			background-color: #FFFFFF;
 			box-shadow:0 0 10px 5px #e5e5e5;
+			align-items: flex-start;
 			.left{
 				overflow: hidden;
-				float: left;
 				image{
 					width: 204rpx;
 					height: 204rpx;
@@ -163,24 +128,18 @@
 			}
 			.right{
 				overflow: hidden;
+				width: 64%;
 				.title{
 					margin: 18rpx 20rpx 0 0;
-					overflow: hidden;
 					color: #222222;
 					font-size: 32rpx;
-					height: 80rpx;
-					overflow: hidden;
-					-webkit-line-clamp: 2;
-					text-overflow: ellipsis;
-					display: -webkit-box;
-					-webkit-box-orient: vertical;
 				}
 				.tips{
 					margin: 16rpx 0;
 					overflow: hidden;
 					.u-line-progress{
 						width: 112rpx;
-						overflow: hidden;float: left;
+						overflow: hidden;
 						margin-right:20rpx ;
 					}
 					.progress{
@@ -190,7 +149,6 @@
 					.bought{
 						color: #777777;
 						font-size: 24rpx;
-						float: right;
 						margin-right: 20rpx;
 					}
 				}
@@ -221,14 +179,13 @@
 						font-weight: 400;
 					}
 					button{
-						width: 176rpx;
+						width: 160rpx;
 						height: 60rpx;
 						background: #FE9903;
 						border-radius: 15px;
 						font-size: 24rpx;
 						color: #FFFFFF;
-						float: right;
-						margin: 10rpx 20rpx 20rpx 20rpx;
+						margin: 0rpx 20rpx 0rpx 20rpx;
 						border: none;
 					}
 				}