首页通用页面案例

 

<template>
	<view class="index">
		<!-- 幻灯片 -->
		<view class="huandeng">
			<swiper class="swiper" 
				indicator-dots="indicatorDots" 
				autoplay="autoplay" 
				interval="interval" 
				duration="duration">
				<template v-for="(it,i) in msg.huandeng">
					<swiper-item @click="goToPage(it.url,it.tab)">
						<image :src="it.icon" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</template>
			</swiper>
		</view>
		<!-- 通知 -->
		<view class="mitz">
			<view class="zuo">
				<text></text>
				<text class="z"></text>
			</view>
		    <view class="you"  @click="goToPage(tongzhi.url,tongzhi.tab)">
				{{tongzhi.msg}}
				<text class="iconfont icon-youjiantou"></text>	
			</view>            
		</view>
		<!-- 自定义导航 -->
		<view class="palace">
			<view v-for="(it,i) in msg.diynav">
				<view class="palace-grid" @click="goToPage(it.url,it.tab)">
					<image :src="it.icon" class="palace-grid-icon"></image>
					<view class="palace-grid-text">{{it.title}}</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		 
		<view class="list" v-for="(it,i) in msg.list">
		    <view class="title">{{it.title}}
		        <view class="you"> 
					<i class="fa fa-angle-right"></i>
		        </view>
		    </view>
		    <view class="palace">
		        <view class="palace-grid"  v-for="(vo,o) in it.data" @click="goToPage(vo.url,vo.tab)">
					<image :src="vo.icon" class="palace-grid-icon"></image>
		            <view class="palace-grid-text">{{vo.title}}</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
				msg:[],
				tongzhi:''
	        }
	    },
	    onLoad() {
	        this.item()
		},
	    methods: {
			goToPage(url,tab) {
				if (!url) {
					return;
				}else{
					if(tab){
						uni.switchTab({
							url: url
						});
					}else{
						uni.navigateTo({
							url:url,
							animationType: this.msg.animation,
						});
					}
				}
			},
	        item() { 
				// 加载数据
				uni.request({
					url:uni.getStorageSync('www')+'/index.php/apps/api/index.html',
					data: {
						uid: uni.getStorageSync('uid'),
					}, 
					method: 'POST', 
					success: (res) => {
						// console.log(res.data.data)
						this.msg = res.data.data;
						this.tongzhi = res.data.data.tongzhi;
						uni.setNavigationBarTitle({
						  title:this.msg.title
						})
					}
				});
			}
	    }
	}
</script>

<style>
	page {
		background-color: #f2f5f9
	}
	.mitz{margin-top:10px;background-color:#fff;padding:20px;overflow:auto;position:relative}
	.mitz .zuo{float:left;border:1px solid #e91e63;width:60px;overflow:auto;margin-right:10px}
	.mitz .zuo text{background-color:#e91e63;width:30px;display:flow-root;color:#f0f8ff;font-size:14px;text-align:center;float:left}
	.mitz .zuo text.z{background-color:#fff;color:#e91e63}
	.mitz .you{width:calc(100% - 113px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid #f2f2f2;padding-left:10px;padding-right:30px;position:relative;display:block}
	.mitz .you text{position:absolute;right:0;top:1px;color:#909090;font-size:22px}
	.palace{position:relative;overflow:hidden;background:#fff;padding:20px;margin-top:10px}
	.palace .palace-grid{padding:10px 0;width:25%;position:relative;float:left;box-sizing:border-box;margin:5px 0}
	.palace .palace-grid-icon{margin:0 auto;width:38px;height:38px;text-align:center;display:block;border:none;border-radius:5px;margin-bottom:5px;padding:5px;border:1px solid #f2f2f2}
	.palace .palace-grid-text{display:block;overflow:hidden;padding-top:.2rem;text-align:center;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:14px;width:80%;margin-left:10%}
	.list{background-color:#fff;padding:20px;margin-top:10px;padding-top:1px}
	.list .title{margin-top:10px;line-height:50px;font-size:18px;font-weight:700;position:relative}
	.list .title .you{width:28px;line-height:28px;background-color:#607d8b;display:block;position:absolute;top:11px;right:0;text-align:center;border-radius:50px;color:#fff}
	.list .palace{border-radius:5px;border:8px solid #cbe8ff;padding:10px}
	.list .palace .palace-grid{width:33.33%}

</style>



评论