nherp-shop/pages/views/tabBar/home.vue

<template>
	<view class="home">
		<!-- 顶部 -->
		<headers :colors="colors" :locations="locations" :swiperList="swiperList" ></headers>
		
		<!-- title -->
		<view class="home-title grid col-3 text-center padding-top-sm text-sm"> 
			<view v-for="(item,index) in gridList" :ukey="index">
				<text class="cuIcon-evaluate_fill padding-right-xs "></text>
				{{item.tilte}}
			</view> 	
		</view>
		
		<!-- 超值卖场 -->
		<chaozhi></chaozhi>
		
		<!-- 推荐分类菜单 与tab分类中不同 -->
		<classList></classList>
		
		<!-- 推销活动 -->
		<activity></activity>
		
		<!-- 秒杀四方格 -->
		<fourSquares></fourSquares>

		<view class="m-3 text-lg padding-tb-sm">猜你喜欢</view>
		<goodList></goodList>
		
		<image class="bottomTap" src="/static/images/new/caomei.gif" ></image>
	</view>
</template>

<script>
	import {getCartNumber} from '@/utils/auth.js'
	import { setTabBarBadge } from'@/utils/util.js'
	var app = getApp();
	import headers from '../../commponent/home/header';
	import chaozhi from '../../commponent/home/chaozhi';
	import classList from '../../commponent/home/classList';
	import activity from '../../commponent/home/activity';
	import fourSquares from '../../commponent/home/fourSquares';
	import goodList from '../../commponent/home/goodList';

	import { 
		getlocation
	} from '@/utils/auth.js'
	export default {
		data() {
			return {
				
				gridList:[{tilte:"新鲜食材"},{tilte:"天天低价"},{tilte:"售后无忧"}],
				swiperList: [{
					img: '/static/images/new/banner11.jpg'
				},{
					img: '/static/images/new/banner22.png'
				},{
					img: '/static/images/new/banner33.png'
				},{
					img: '/static/images/new/banner44.png'
				}],
				
				colors: '',
				bottoms: '100',
				scrollShow: false, //是否显示悬浮菜单

				locations: {

				},
				loading: true,


			};
		},
		components: {
			headers,
			chaozhi,
			classList,
			activity,
			fourSquares,
			goodList,
			
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// #ifdef APP-PLUS
			this.bottoms = '0'  //在APP下 规格弹窗的位置发生变化
			// #endif
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.setData({
				colors: app.globalData.newColor
			});
			uni.setNavigationBarColor({ //设置标题栏颜色
				// backgroundColor: app.globalData.newColor,
				// frontColor: '#ffffff'
			});
			// #ifdef H5
			let locations = getlocation() //获取位置信息
			if (locations) {
				this.locations = locations
			}
			// #endif
			
			let cartNumber = getCartNumber()|| 0
			setTabBarBadge(cartNumber)
			
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// if (this.dataList.length >= 30) { //模拟上拉加载数据
			// 	this.loading = false
			// 	return
			// }
			// let data = this.dataList;
			// setTimeout(() => {
			// 	this.loading = true
			// 	this.dataList.push(...data);
			// }, 500)
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			onPageScroll: function(e) {
				if (e.scrollTop >= 500) {
					this.setData({
						scrollShow: true
					});
				} else {
					this.setData({
						scrollShow: false
					});
				}
			}
		}
	};
</script>
<style scoped lang="scss">
	.home {
		margin-bottom: 40rpx;
	}
	.home-title{
		color: rgb(158, 160, 166);
		border-radius-top: 20px;
		border-radius: 20px 20px 0 0;
		background-color: #fff;
		position: relative;
		z-index: 99999;
		top: -10px;
	}
	.bottomTap{
		width: 75px;
		height: 75px;
		position: fixed;
		bottom: 80px;
		right: 3%;
		z-index: 200;
	}
</style>