[修改] 首页推荐模块修改布局

[完善] 推荐列表页面

pages.json

@@ -73,5 +73,27 @@
 		"navigationBarTitleText": "海南旅游",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
+	},
+	"tabBar": {
+	    "color": "#333333",
+	    "selectedColor": "#FE9903",
+	    "borderStyle": "black",
+	    "backgroundColor": "#ffffff",
+	    "list": [{
+	        "pagePath": "pages/index/index",
+	        "iconPath": "static/tabbar/home.png",
+	        "selectedIconPath": "static/tabbar/home-active.png",
+	        "text": "首页" 
+	    },{
+	        "pagePath": "pages/discover/discover",
+	        "iconPath": "static/tabbar/order.png",
+	        "selectedIconPath": "static/tabbar/order-active.png",
+	        "text": "发现"
+	    },{
+	        "pagePath": "pages/recommList/index",
+	        "iconPath": "static/tabbar/order.png",
+	        "selectedIconPath": "static/tabbar/order-active.png",
+	        "text": "推荐"
+	    }]
 	}
 }

pages/index/index.vue

@@ -78,14 +78,22 @@
 				</view>
 			</view>
 			<!-- tab标签 -->
-			<view class="lf-m-t-40">
+			<!-- <view class="lf-m-t-40">
 				<u-tabs :list="tab_list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
+			</view> -->
+			<!-- 推荐 -->
+			<view class="lf-row-between lf-m-t-40 lf-m-b-10">
+				<view class="lf-font-36 lf-font-bold lf-color-333">推荐</view>
+				<view class="lf-flex lf-color-555">
+					<view class="lf-m-r-10">更多</view>
+					<u-icon name="lock-fill lf-text-vertical"></u-icon>
+				</view>
 			</view>
 		</view>
 		<!-- 商品列表-瀑布流 -->
-		<view v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex" v-if="current == tabIndex" style="padding: 0 20rpx;">
-			<lf-waterfall :list="tabItem.list"></lf-waterfall>
-			<u-loadmore v-if="tabItem.list.length" :status="tabItem.loading_text" @loadmore="addRandomData"></u-loadmore>
+		<view style="padding: 0 20rpx;">
+			<lf-waterfall :list="recomm_list"></lf-waterfall>
+			<u-loadmore v-if="recomm_list.length" status="已加载全部数据~" @loadmore="addRandomData"></u-loadmore>
 			<lf-nocontent v-else></lf-nocontent>
 		</view>
 		<!-- 回到顶部 -->
@@ -103,6 +111,7 @@
 		data() {
 			return {
 				banner_current: 0,
+				recomm_list: [],
 				tab_list: [{
 					name: '推荐',
 					list: []
@@ -122,11 +131,49 @@
 					name: '酒店',
 					list: []
 				}],
-				current: 0
+				current: 0,
+				list: [
+				 {
+				  price: 35,
+				  title: '北国风光，千里冰封，万里雪飘',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
+				 },
+				 {
+				  price: 75,
+				  title: '望长城内外，惟余莽莽',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
+				 },
+				 {
+				  price: 385,
+				  title: '大河上下，顿失滔滔',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
+				 },
+				 {
+				  price: 784,
+				  title: '欲与天公试比高',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
+				 },
+				 {
+				  price: 7891,
+				  title: '须晴日，看红装素裹，分外妖娆',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
+				 },
+				 {
+				  price: 2341,
+				  shop: '李白杜甫白居易旗舰店',
+				  title: '江山如此多娇，引无数英雄竞折腰',
+				  image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
+				 }
+				]
 			}
 		},
 		onLoad() {
-			// this.addRandomData();
+			this.addRandomData();
 		},
 		methods: {
 			addRandomData() {
@@ -135,7 +182,7 @@
 					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
 					let item = JSON.parse(JSON.stringify(this.list[index]))
 					item.id = this.$u.guid();
-					this.flowList.push(item);
+					this.recomm_list.push(item);
 				}
 			},
 			tabChange(current){

pages/recommList/index.vue

@@ -6,7 +6,12 @@
 		<swiper :style="{height: 'calc('+ windowHeight +'px - 110rpx)', width: '750rpx'}" :current="current" @change="swiperChange">
 			<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
 				<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
-					1111
+					<view class="lf-m-t-20"></view>
+					<lf-waterfall :list="tabItem.list"></lf-waterfall>
+					<view class="loading-more">
+						<text class="loading-more-text" v-if="tabItem.list.length">正在加载</text>
+						<lf-nocontent v-else></lf-nocontent>
+					</view>
 				</scroll-view>
 			</swiper-item>
 		</swiper>
@@ -38,14 +43,62 @@
 				}],
 				current: 0,
 				windowHeight: 0,
-				isRefresher: false // scroll-view下拉刷新状态，当前默认没有触发
+				isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发
+				list: [
+				 {
+				  price: 35,
+				  title: '北国风光，千里冰封，万里雪飘',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
+				 },
+				 {
+				  price: 75,
+				  title: '望长城内外，惟余莽莽',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
+				 },
+				 {
+				  price: 385,
+				  title: '大河上下，顿失滔滔',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
+				 },
+				 {
+				  price: 784,
+				  title: '欲与天公试比高',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
+				 },
+				 {
+				  price: 7891,
+				  title: '须晴日，看红装素裹，分外妖娆',
+				  shop: '李白杜甫白居易旗舰店',
+				  image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
+				 },
+				 {
+				  price: 2341,
+				  shop: '李白杜甫白居易旗舰店',
+				  title: '江山如此多娇，引无数英雄竞折腰',
+				  image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
+				 }
+				]
 			}
 		},
 		onLoad(){
 			this.windowHeight = getApp().globalData.windowHeight;
+			this.addRandomData();
 		},
 		methods: {
-			tabChange(){
+			addRandomData() {
+				for(let i = 0; i < 10; i++) {
+					let index = this.$u.random(0, this.list.length - 1);
+					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
+					let item = JSON.parse(JSON.stringify(this.list[index]))
+					item.id = this.$u.guid();
+					this.tab_list[0].list.push(item);
+				}
+			},
+			tabChange(current){
 				this.current = current;
 			},
 			// 滑块下标值变化
@@ -87,5 +140,7 @@
 	.com{
 		width: 100%;
 		height: 100%;
+		box-sizing: border-box;
+		padding: 0rpx 32rpx;
 	}
 </style>