【首页】改变内容块高度

一、【首页】改变内容块高度

1.1 获取可视区域高度可以使用uni.getSystemInfo()，但是在ios中是有bug的，所以的高度值不对。

1.2 我们修正bug思想是：获取组件元素的高度值的合，然后赋值到内容块中（style=’height’）。

1.3 具体代码如下：特别注意需要在onReady中写入

1.4swiper中做出的改变如下：

1.5在index.vue中的代码如下：

<template>
	<view class="index">
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollintoindex">
			<view
			  :id="'top'+index"
			  class="scroll-item"
			  v-for="(item,index) in topbar"
			  :key='index'
			  @tap='changetab(index)'
			>
				<text :class='topbarindex===index?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		
		<swiper @change="onchangetab" :current="topbarindex" :style="'height:'+clentheight+'px;'">
			<swiper-item 
			  v-for="(item,index) in topbar"
			  :key="index">
				<!--<view >{{item.name}}</view>-->
				<view class="home-data">
					<indexswiper></indexswiper>
					<recommend></recommend>
					<card cardtitle='猜你喜欢'></card>
					<commoditylist></commoditylist>
				</view>
			</swiper-item>
		</swiper>
		
		<!--推荐模板-->
		<!--<indexswiper></indexswiper>
		<recommend></recommend>
		<card cardtitle='猜你喜欢'></card>
		<commoditylist></commoditylist>-->
		
		<!--其他模板：运动户外、美妆....-->
		<!--<banner></banner>
		<icons></icons>
		<card cardtitle='热销爆品'></card>
		<hot></hot>
		<card cardtitle='推荐店铺'></card>
		<shop></shop>
		<card cardtitle='为您推荐'></card>
		<commoditylist></commoditylist>-->
	</view>
</template>

<script>
	import indexswiper from '@/components/index/indexswiper.vue'
	import recommend from '@/components/index/recommend.vue'
	import card from '@/components/common/card.vue'
	import commoditylist from '@/components/common/commoditylist.vue'
	import banner from '@/components/index/banner.vue'
	import icons from '@/components/index/icons.vue'
	import hot from '@/components/index/hot.vue'
	import shop from '@/components/index/shop.vue'
	export default {
		data() {
			return {
				//选中的索引
				topbarindex:0,
				//顶栏跟随的索引id值
				scrollintoindex:"top0",
				//内容块的高度值
				clentheight:0,
				//顶栏数据
				topbar:[
					{name:'推荐'},
					{name:'运动户外'},
					{name:'服饰内衣'},
					{name:'鞋靴箱包'},
					{name:'美妆个护'},
					{name:'家居数码'},
					{name:'食品母婴'}
				]
			}
    	},
		components:{
			indexswiper,
			recommend,
			card,
			commoditylist,
			banner,
			icons,
			hot,
			shop
		},
		onLoad() {

		},
		onready(){
			let view = uni.createSelectorQuery().select(".home-date");
			view.boundingClientRect(data =>{
				this.clentheight = data.height;
			}).exec();
		},
		methods: {
			changetab(index){
				if(this.topbarindex === index){
					return;
				}
				this.topbarindex = index;
				this.scrollintoindex = 'top'+index;
			},
			onchangetab(e){
				this.changetab(e.detail.current);
			}
		}
	}
</script>

<style scoped>
	.scroll-content{
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}
	.scroll-item{
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 32rpx;
	}
	.f-active-color{
		padding: 10rpx 0;
		border-bottom: 6rpx solid #cc0000;
	}
</style>