uni-app学习日记5

自定义组件嵌入另一个组件

*******************html：**************************
			<list-item></list-item>

*****************JavaScript**************************
import listItem from './list-item.vue'
	export default {
		components:{
			listItem
		},

************以下写法会报错************************
import list-item from './list-item.vue'
	export default {
		components:{
			list-item
		},
//import后推荐接驼峰名

选项卡与内容页面联动

1. 内容页面滚动引起选项卡变化

************list.vue 内容页面当前的页码，发送出去*************************
//HTML
<swiper class="home-swiper" :current="activeIndex" @change ="change" >

//JavaScript
		methods:{
			change(e){
				const {current}=e.detail
				this.$emit('change', current)
			}
		}
********************************************************************


*****************index.vue 接收内容页码********************************
//HTML
<list :tab="tabList" :activeIndex="activeIndex" @change="change"></list>

//JavaScript
		methods: {
			change(current) {
				this.tabIndex=current
			},

********************************************************************


******************选项卡组件从页面获取内容页码***********************
//***************index.vue***************
//HTML
		<tab :list="tabList" @tab='tab' :tabIndex='tabIndex'></tab>

//**************tab.vue***********************
//JavaScript
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			tabIndex:{
				type:Number,
				default:0
			}
		}, 
		watch:{
			// 监听 data props 值的变化
			tabIndex(newVal,oldVal){
				this.activeIndex=newVal
			}
		},

//HTML
<view v-for="(item,index) in list" :key="index" :class="{active:activeIndex===index}" 
@click="clickTab(item,index)"   class="tab-scoll_item">
					{{item.name}}
</view>
******************************************************************

3. 选项卡变化引起内容页面滚动

//**************index.vue**********************
//HTML
			<!-- 滚动列表组件 -->
			<list :tab="tabList" :activeIndex="activeIndex" @change="change"></list>

//JavaScript
		methods: {
			change(current) {
				this.tabIndex=current
			},
			// 点击标签事件
			tab({
				data,
				index
			}) {
				console.log(data, index)
				this.activeIndex=index
			},

//********************list.vue******************************
	<swiper class="home-swiper" :current="activeIndex" @change ="change" >

:current="activeIndex"一定要加最前面的冒号，表示动态变化，写成current="activeIndex"会报错

懒加载选项页面

用于解决切换页面时，老数据转换成新数据是的卡顿闪烁现象。使页面切换更加平滑

//**********list.vue**********************
data() {
			return {
				list: [],
				listCatchData: {}//数据缓存
			};
		},

getList(current) {
				this.$api.get_list({
					name: this.tab[current].name
				}).then(res => {
					const {
						data
					} = res
					console.log('get_list数据：', data)
					// this.list=data
					// this.listCatchData[current] = data，将对应分类的数据给缓存的其中一项
					this.$set(this.listCatchData, current, data)
				})
			}

为什么要使用 this.$set(this.listCatchData, current, data)？

data() {
			return {
				list: [],
				listCatchData: {}//数据缓存
			};
		},

等价于

data() {
			return {
				list: [],
				listCatchData: {
				0:[],
				1:[]
				}//由于JS的限制，this.listCatchData[current] = data，不会生效。
			};
		},