<template>
	<view>
		<nav-bar backState="2000" title="组件示例"></nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="nav_list" @click="onPageJump('/pages/demo/themeColor')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>项目主题色介绍</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/navBarMemo/index')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>头部导航示例</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/formDemo')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>表单模板</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/list')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>上拉加载/下拉刷新列表</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/areaSelect')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>地区选择</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/popup')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>弹窗</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/prompt')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>弹窗输入框</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/swipeAction')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>滑动操作</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/parser')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>富文本编译</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/waterfall/common')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>瀑布流列表</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/shortVideo')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>防抖音滑动视频（带进度加载）(微信小程序、H5)</text>
		</view>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
import zNavigation from '@/components/module/navigation.vue';
export default {
	components: {
		zNavigation
	},
	data() {
		return {};
	},
	//第一次加载
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	//页面显示
	onShow() {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.nav_list {
	background-color: #fff;
	padding: 30upx;
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 10upx;
	&:active {
		background-color: #f5f5f5;
	}
	image {
		width: 40upx;
		height: 40upx;
	}
	text {
		font-size: 28upx;
		color: #333;
		margin-left: 30upx;
	}
	&::after {
		content: '';
		position: absolute;
		right: 30upx;
		top: 50%;
		transform: translateY(-50%);
		width: 40upx;
		height: 40upx;
		background-image: url('../../static/demo/icon_right.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
}
</style>
