uni-app学习笔记五（第5章项目实战：选项卡切换，主页卡片视图制作，基础卡片视图制作）

选项卡切换

首先增加click，传入点击的项目和index。
下面的method中对应添加clickTab。
然后增加动态绑定class,这里注意动态绑定class只能绑定一个。写法是 :class.

<template>
	<view class="tab">
		<scroll-view class="tab-scroll" scroll-x>
			<view class="tab-scroll_box">
				<view v-for="(item,index) in list" :key="index" class="tab-scroll_item" :class="{active:activeIndex === index}"  @click="clickTab(item,index)">{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="tab-icons">
			<uni-icons type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

		methods:{
			clickTab(item,index){
				console.log(item,index)
				this.activeIndex = index    //将当期点击的index赋给
			}
		}

   
这里要注意的是 &的写法。解释如下。就是给tab-scroll_item增加属性。
sass的快速入门，这篇文章写得很好：http://www.ruanyifeng.com/blog/2012/06/sass.html

至此，实现了点击选项卡，对应的选项变红的效果。

选项卡点击的选项传递给主页index.vue

修改方法在下图，在子组件点击的里面增加发送，父组件将它和tab_update绑定，在里面进行处理。这里暂时是log.

主页卡片视图制作

新建组件及同名文件夹 list-scroll.vue 里面代码如下

<template>
	<view class="scroll">
		<scroll-view class="list-scroll" scroll-y>
			<!-- 最好像下面这样再加一个view，避免滚动不了的问题 -->
			<view>
				<slot></slot>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.scroll{
		flex:1;
		height: 100%;
		// 溢出隐藏,清除浮动
		overflow: hidden;
		box-sizing: border-box;
		.list-scroll{
			height: 100%;
			display: flex;
			flex-direction: column;
		}
	}
</style>

index.vue相关代码。注意page前面没有点。page意思是当前页面的父节点。
        

display: flex; //将对象作为弹性伸缩盒显示
 flex-direction: row;   // 调整主轴方向
flex: 1;      // 自动放大,占满剩余空间

到此为止，实现了主页上下滚动而选项卡不隐藏的效果，如下。

没有出结果的时候，一定要刷新看一下。有时候是保存完就更新显示，但有时候不是的。

基础卡片的视图实现

这个还是挺复杂的。创建了list-card组件。主要是调整格式。直接上代码理解吧。太多细节了。

index.vue使用的地方

<template>
	<view class="home">
		<navbar></navbar>
		<tab :list="tabList" @tab="tab_update"></tab>
		
		<list-scroll>
			<list-card v-for="item in 5"></list-card>
		</list-scroll>
	</view>
</template>

list-card.vue

<template>
	<view>
		<!-- 基础卡片 -->
		<view class="listcard">
			<view class="listcard-image">
				<!-- aspectFill 保持纵横比缩放图片 -->
				<image src="/static/logo.png" mode="aspectFill"></image>
			</view>
			<view class="listcard-content">
				
				<view class="listcard-content_title">
					<text>
						uni-app开发框架开发框架开发框架开发框架开发框架开发框架开发框架开发框架开发框架开发框架 为了查看文本超过两行自动隐藏而加的文字
					</text>
				</view>
				
				<view class="listcard-content_des">
					<view class="listcard-content_des-label">
						<view class="listcard-content_des-label-item">
							前端
						</view>
					</view>
					<view class="listcard-content_des-label-browse">
						120浏览
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.listcard{
		display: flex;
		padding: 10px;
		margin:10px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba($color: #000000, $alpha: 1.0);
		box-sizing: border-box;
		.listcard-image{
			// 不让图片被挤压
			flex-shrink: 0;
			width:60px;
			height: 60px;
			border-radius: 5px;
			overflow: hidden;
			image{
				width:100%;
				height: 100%;
			}
		}
		.listcard-content{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 10px;
			width:100%;
			.listcard-content_title{
				padding-right: 30px;
				font-size: 14px;
				color: #333;
				font-weight: 400;
				line-height: 1.2;
				// 下面的text是做溢出隐藏
				text{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp:2;
					-webkit-box-orient:vertical;
				}
			}
			.listcard-content_des{
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				.listcard-content_des-label{
					display: flex;
					.listcard-content_des-label-item{
						padding: 0 5px;
						margin-right: 5px;
						border-radius: 15px;
						color: $mk-base-color;
						border: 1px $mk-base-color solid;
					}
				}
				.listcard-content_des-label-browse{
					color: #999999;
					line-height: 1.5;
				}
			}
		}
	}
</style>

效果