茶多多项目【ly-tab插件和better-scroll插件】

<template>
<!-- OK OK OK OK OK OK OK OK OK -->
	<div class="home">
		<!-- 头部=============================================================================== -->
		<div class="headers">
			<div class="headers-main">
				<Header></Header>
<!-- 引入ly-tab插件使用  Ly-tab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件！！！！！！！！！！！！！！！！！-->
				<ly-tab
					v-model="selectedId"
					:items="items"
					:options="options"
					@change="changeTab"
				>
				</ly-tab>
			</div>
		</div>
		 <!-- better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。
		 better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 -->
		<!-- 主体=======注意：当content的高度不超过父容器的高度，是不能进行滚动的======================================================================== -->
		<section ref="wrapper" class="wrapper">
			 <div> <!--注意这里还要一个div，滚动插件才能生效！！！！！！！！！！！！！！！ -->
				<div v-for="(item, index) in newData" :key="index">
					<!-- {{item.data}}     把各个列表数据通过props传递给各个组件 -->  
					<Swiper v-if="item.type == 'swiperList'" :swiperList="item.data"></Swiper>
					<Icons v-if="item.type == 'iconsList'" :iconsList="item.data"></Icons>
					<Recommend v-if="item.type == 'recommendList'" :recommendList="item.data"></Recommend>
					<Ad v-if="item.type == 'adList'" :adList="item.data"></Ad>
					<Like v-if="item.type == 'likeList'" :likeList="item.data"></Like>
				</div>
			</div>
		</section>
		<!-- 尾部=============================================================================== -->
		<Tabbar></Tabbar>
	</div>
</template>

<script type="text/javascript">
import Header from "@/components/home/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
import Swiper from "@/components/home/Swiper.vue";
import Icons from "@/components/home/Icons.vue";
import Like from "@/components/home/Like.vue";
import Ad from "@/components/home/Ad.vue";
import Recommend from "@/components/home/Recommend.vue";
// 太卡 导致浏览器资源加载延迟
// 引入better-scroll插件
import BetterScroll from "better-scroll"; //子元素高度比父元素高度要高，必须添加在mounted中!!!!!!!!!!!!!!!!!!
// import axios from "axios";
// import { Indicator } from "mint-ui";
import http from "@/common/api/request.js"
export default {
	name: "Home",
	data() {
		return {
			selectedId: 0,
			items: [
				// { label: "推荐" },
				// { label: "大红袍" },
				// { label: "铁观音" },
				// { label: "绿茶" },
			],
			newData: [],
			oBetterScroll: "",
			tBetterScroll: "",
			options: {
				activeColor: "#b0352f",
				//可在这里指定labelkey为你数据里文字对应的字段
			},
		};
	},
	components: {
		Tabbar,
		Header,
		Swiper,
		Icons,
		Recommend,
		Like,
		Ad,
	},
	created() {
		this.getData();//home页面一创建完成就执行这个获取数据函数
	},

	methods: {
		async getData() {
			console.log("这里是http",http)
			// this.$Indicator.open("加载中..."); //在发送请求之前执行这个 加载中....
			let res = await http.$axios({
				url: "/api/index_list/0/data/1",
			});
			console.log("这里Home=>getData=>res", res);//   {topBar: Array(7), data: Array(4)}
			this.items = Object.freeze(res.topBar); //这里是ly-tab部分的数据(打印res就知道哪些数据·了)
			this.newData = Object.freeze(res.data); //这里是ly-tab下面的所有内容的数据
            // (！！！！！！这里的newData是页面刚开始时的数据，即tab选中为‘推荐’时的数据)

			//有数据以后就关闭
			// setTimeout(() => {
			// 	this.$Indicator.close();
			// }, 300);
			// console.log(res.data.data.data);
			//！！！要当dom都加载完了再去执行!!!!!!！！！！！！！！！！！！
			this.$nextTick(() => {   //better-scroll滚动插件
				this.oBetterScroll = new BetterScroll(this.$refs.wrapper, {
					movable: true,
					zoom: true,
					click: true,
				});
			});
		},

// 当改变tab时(推荐  大红袍 绿茶....)就触发这个函数
		changeTab(item, index) {
			console.log(index);//推荐0  大红袍1 2 ....
			this.addData(index);
		},
		
		async addData(index) {
			let res = await http.$axios({
				url: "/api/index_list/" + index + "/data/1",//根据index去判断请求哪个接口
			});
			console.log("这里Home=>addData=>res", res);
			// !!!判断data是不是数组  constructor用于判断对象类型
			if (res.constructor != Array) {
				this.newData = res.data;
			} else {
            // (！！！！！！这里的newData是页面切换tab后的数据,如tab切换为大红袍 )
				this.newData = res;
			}

         //当dom都加载完了再去执行！！！！！！！！！！！！！！！！
			this.$nextTick(() => {
				this.tBetterScroll = new BetterScroll(this.$refs.wrapper, {
					movable: true,
					zoom: true,
					click: true,
				});
			});
		},

	},
};
</script>
<style scoped>
/* .ly-tab{
		position: fixed;
		top: 1.6rem;
		left: 0;
	} */
.wrapper {
	flex: 1; /* flex:1相当于设置了flex:1 1 auto。该元素将会占据容器中所有的剩余空间 */
	overflow: hidden;
}
.home {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.headers {
	width: 100%;
	height: 2.88rem;
}
.headers-main {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
/* section {
	margin-top: 3rem;
} */
::v-deep .ly-tabbar {
	box-shadow: none;
	border-bottom: none;
}
</style>

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。

better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。