yunshangxie/pages/index/index.vue

<template>
	<view class="index">
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Home ref="home"></Home>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Service ref="service"></Service>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Discovery ref="discovery"></Discovery>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Pizz ref="pizz"></Pizz>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<User ref="user"></User>
			</scroll-view>
		</view>

		<tn-tabbar :outHeight="140" :height="120" v-model="currentIndex" :list="tabbarList" activeColor="#3377FF"
			inactiveColor="#AAAAAA" activeIconColor="#3377FF" inactiveIconColor="#8A8E99" :animation="true"
			:safeAreaInsetBottom="true" @change="switchTabbar"></tn-tabbar>
	</view>
</template>

<script>
	import Home from './home.vue'
	import Service from './service.vue'
	import Discovery from './discovery.vue'
	import Pizz from './pizz.vue'
	import User from './user.vue'

	export default {
		components: {
			Home,
			Service,
			Discovery,
			Pizz,
			User
		},
		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [{
						title: '首页',
						activeIcon: '/static/01_1.png',
						inactiveIcon: '/static/01.png'
					},
					{
						title: '协会活动',
						activeIcon: '/static/02_2.png',
						inactiveIcon: '/static/02.png'
					},
					{
						// 服务、案例、品牌、合作、发现、探索
						activeIcon: '/static/logo.png',
						inactiveIcon: '/static/logo.png',
						iconSize: 110,
						out: true
					},
					{
						title: '发现',
						activeIcon: '/static/03_3.png',
						inactiveIcon: '/static/03.png'
					},
					{
						title: '个人中心',
						activeIcon: '/static/04_4.png',
						inactiveIcon: '/static/04.png'
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: []
			}
		},
		onLoad(options) {
			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)
			var that = this;
			uni.$on('depId', function(data) {
				that.switchTabbar(data.index);
			})

		},
		mounted() {
			//this.wxshare();
		},
		onShareAppMessage() { // 分享到微信好友
			// 更多参数配置，参考文档
			return {
				title: '智慧云商协',
				path: '/pages/index/index',
				imageUrl: '/static/logo.png',
			}
		},
		onShareTimeline() { // 分享到朋友圈
			return {
				title: '智慧云商协',
				path: '/pages/index/index',
				imageUrl: '/static/logo.png',
			}
		},
		methods: {
			wxshare() {
				this.$wxshare({
					url: 'http://ysh.0rui.cn/#/pages/index/index',
					data: {
						url: window.location.href.split("#")[0],
					},
					share_data: {
						title: '智慧云商协',
						desc: '智慧云商协',
						imgUrl: 'http://ysh.0rui.cn/static/ser.png',
						link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
					}
				})
			},
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
			},


			// 瀑布流导航页面滚动到底部
			tabbarPageScrollLower(e) {
				console.log(123);
				if (this.currentIndex === 0) {
					this.$refs.home.ReachBottom();
				}
				if (this.currentIndex === 1) {
					this.$refs.service.ReachBottom();
				}
			},

			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		height: 100vh;
		position: relative;

		.custom-tabbar-page {
			width: 100%;
			height: calc(100vh - 110rpx);
			box-sizing: border-box;
			padding-bottom: 0rpx;
			padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
		}
	}
</style>