hezhiying/pages/home/home.vue

<template>
	<view class="page">
		<view class="head-info">
			
			<!-- 搜索 -->
			<view class="head-search">
				<navbar :title="'首页'" :isCenter="true" :back="true"></navbar>
				<view class="icon-info" @click="onSkip('menu')">
					<u-icon name="grid" size="26"></u-icon>
				</view>
				<view class="search" @click="onSearch">
					<view class="icon">
						<u-icon name="search" size="26"></u-icon>
					</view>
					<view class="hint">
						<text class="max">请输入关键字搜索</text>
						<text class="min">热门内容</text>
					</view>
				</view>
				
			</view>
			<!-- 分类列表 -->
			
		</view>
		<mescroll-body ref="mescrollRef"
                   @down="downCallback"
                   @up="upCallback"
                   :down="downOption"
                   :up="upOption"
                   :top="0">
		<view class="main" v-show="classifyShow===0">
			<!-- banner -->
			<view class="banner">
				<u-swiper :circular="true" :list="swiperList" previousMargin="30" nextMargin="30" :autoplay="true"></u-swiper>
				
			</view>
			<view class="devide"></view>
			<view class="new-product">
				<view class="product-title">
					<view class="title">
						
						<text>新品推荐</text>
					</view>
					
				</view>
				<view class="goods-list">
					<view class="list" v-for="(item,index) in recommend" :key="index" @click="onSkip('goods',item)">
						<view class="pictrue">
							<image :src="item"></image>
						</view>
						
					</view>
					
				</view>
			</view>
			<view class="devide"></view>
			<view class="new-product">
				<view class="product-title">
					<view class="title">
						
						<text>甄选好物</text>
					</view>
					
				</view>
				<image src="/static/image/x.png" @click="onSkip('goods','/static/image/x.png')" class="zenxuan" mode=""></image>
			</view>
			<view class="devide"></view>
			<view class="new-product">
				<view class="product-title">
					<view class="title">
						
						<text>商品推荐</text>
					</view>
					
				</view>
				<image src="/static/image/mescroll-empty.png" class="empty" mode="widthFix"></image>
				<view style="padding: 0rpx 0 20rpx 0;">
					~空空如也~
				</view>
			</view>
		</view>
    </mescroll-body>
    <ClassifyData v-show="classifyShow!=0"></ClassifyData>
		<!-- tabbar -->
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
import navbar from '@/components/navbar.vue'
import TabBar from '../../components/TabBar/TabBar.vue';
import ClassifyData from '../../components/ClassifyData/ClassifyData.vue';
// 引入mescroll-mixins.js
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
	components:{
		TabBar,
		ClassifyData,
		navbar
	},
	data(){
		return{
			  mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			  // 下拉刷新的配置(可选, 绝大部分情况无需配置)
			  downOption: {},
			  // 上拉加载的配置(可选, 绝大部分情况无需配置)
			  upOption: {
				use: false
			  },
			swiperList: [
				'/static/image/b1.png',
				'/static/image/b2.png',
				'/static/image/b3.png'
				
			],
			slideNum: 0,
			
			classifyShow: 0,
			// 页面高度
			pageHeight: 500,
			recommend:[
				'/static/image/v1.png',
				'/static/image/v2.png',
				'/static/image/v3.png',
				'/static/image/v4.png',
			]
		}
	},
	onReady() {
		uni.hideTabBar();
		// #ifdef MP
		uni.setNavigationBarTitle({
			title: '首页',
		})
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: 'rgb(221, 190, 127)',
		})
		// #endif
	},
	onLoad() {

	},
	onPageScroll(e){
		let scrollTop = e.scrollTop;
		if(scrollTop > 0){
			this.pageHeight = 210;
		}else{
			this.pageHeight = 500;
		}
	},
  onReachBottom(){
    console.log(12333);
  },
	methods:{
    /*下拉刷新的回调, 有三种处理方式:*/
    downCallback(){
      this.mescroll.endSuccess();
    },
    /*上拉加载的回调*/
    upCallback(page) {
      setTimeout(() =>{
        this.mescroll.endByPage(10, 20);
      },2000)
    },
		/**
		 * 菜单导航滚动
		 */
		ScrollMenu(e){
			let scrollLeft = e.target.scrollLeft;
			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				let wid = e.target.scrollWidth - data.width - (data.left*2+5);
				this.slideNum = (scrollLeft/wid*300) / 2;
			}).exec();
		},
		/**
		 * 搜索点击
		 */
		onSearch(){
			uni.navigateTo({url:'/pages/search/search'})
		},
		
		
		/**
		 * 跳转点击
		 * @param {String} type 跳转类型
		 */
		onSkip(type,item){
			switch (type){
				case 'menu':
					uni.navigateTo({
						url: '/pages/SearchGoodsList/SearchGoodsList'
					})
					break;
				case 'inform':
					break;
				
				
				case 'goods':
					uni.navigateTo({
						url: '/pages/GoodsDetails/GoodsDetails?item='+item,
						animationType: 'zoom-fade-out',
						animationDuration: 200
					})
					break;
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import 'home.scss';
</style>