dreamland/pages/index/index.vue

<template>
	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8" 
	:footerSets="{height:150, zIndex:100, bg:'none'}" :isLoading="pageLoading">
		<!-- 页面主体 -->
		<view slot="gBody" class="gui-margin">
			<gui-demo-banner :title="fetch.config.name"
			:img="fetch.config.home_top" 
			:desc="fetch.config.info"></gui-demo-banner>
			<block v-for="(v, k) in fetch.cate" :key="k">
				<view class="gui-margin-top">
					<text class="gui-h5 gui-color-gray gui-bold">{{v.name}}</text>
				</view>
				<view style="margin-top:15rpx" class="gui-flex gui-rows gui-wrap gui-space-between">
					<view class="demo" v-for="(v1, k1) in v.button" :key="k1" @click="location(v1)">
						<button type="default" class="gui-button gui-bg-primary" :style="{'background-color':v1.bgcolor + ' !important'}">
							<text class="gui-icons gui-button-text-mini gui-color-white" 
							style="padding-right:10rpx;">{{v1.name}}</text>
						</button>
					</view>
				</view>
			</block>
		</view>
		<foot ref="foot" slot="gFooter" :value="foot_value"></foot>
		<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
	</gui-page>
</template>
<script>
import deverShare from '@/lib/dever/components/share.vue';
import foot from '@/pages/index/foot.vue';
export default {
	data() {
		return {
			foot_value : 0,
			fetch : {
				user : {},
				config : {
					home_top : '',
				},
				score : {},
				xuanchuan : [],
				share : false,
			},
		}
	},
	components:{
		deverShare,foot
	},
	onLoad() {
		this.getInfo();
	},
	onShow() {
		this.$nextTick(function() {
			this.$refs.foot.cur = this.foot_value;
		});
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getInfo();
	},
	methods: {
		getInfo : function() {
			this.Dever.get(this, 'app/collection/?l=api.home', {id:-1});
		},
		location : function(v) {
			this.Dever.location(v.link, 'webview', v.name);
		}
	}
}
</script>
<style>
.demo{width:210rpx; margin:10rpx;}
.button{width:90rpx; height:90rpx; line-height:90rpx; border-radius:8rpx; margin:10rpx;}
.button-text{font-size:38rpx; text-align:center;}
</style>