
	<swiper style="height: 100%;">
		<swiper-item class="home-swiper">
			<view>我是小狗</view>
			<view>我是小狗</view>
			<view>我是小狗</view>
			<list-card></list-card>
		</swiper-item>
	</swiper>

效果：可以左右滑动

2.绑定事件用 change事件

绑定change

//这里的@change可是系统的哈

<swiper @change="change">

目标组件接收

@自己定义的名=“用啥处理”


<list :tab="tabList" @change="change"></list>
		<!-- //index界面里接受 发来的current（当前选项卡的下标数） -->

这里的@change是自己定义的哈可不是系统的是因为咱在定义子组件发送时间名的时候设置的

子组件发送

this.$emit('change', current)


change(e)
			{
				console.log('嘘嘘嘘',e);
				const {current}=e.detail;//取到 current这个数据
				this.$emit('change', current)
			}

index里面传参数

	<tab :list="tabList" :tabIndex="tabIndex"  @tab="tab"></tab>

tab里面改

首先props接收index 传来的参数然后在watch里监听它


	watch:{
					tabIndex(a,b){//监听哪个就写哪个 把props里面的属性写成函数就行啦
						console.log('汪汪汪',a,b)//a是改变后的数据 b是改变前的数据
					this.activeIndex=a;
					}

activeindex 你自己定义的你一变那啥也变

这样就是实现了滑动 ——>上面的tab跟着变

怎么实现点击tab——>滑动？

首先获取tab点击时的下标传递给 list (list里面写了swiper swiper里有个current :current="activeIndex" 会自动跳到咱想要的界面）

1.tab 传给index

发送：


this.$emit('tab', {
					data: item,
					index: index
				})

接收：

@tab="tab"

2.index传给list

index定义一个activeIndex

	<list :tab="tabList" @change="change" :activeIndex="activeIndex"></list>

list用 props接收一个activeIndex


activeIndex:{
				type:Number,
				default:0
			}

接收后直接

<swiper @change="change" :current="activeIndex">

完成了双向滑动啦

二、从数据库中拿数据（）

别看“二、”这么多哈都是虚的目的就是把云函数获取的数组传给list-card list引用后传给list-item(看看那个云数组有几条？好显示) ->list-card

1.创建新云函数


'use strict';
const db=uniCloud.database()//1.创建引用
exports.main = async (event, context) => {
	//event为客户端上传的参数
	
	const list =await db.collection('article')	//2.创建
	.field({//指定返回的字段
		content:false,//TRUE 表示只返回content
		}).get()
	//返回数据给客户端
	
	return {
		code: 200,
		msg: '数据请求成功',
		data: list.data
	}
 };

1.创建数据库引用

2.对哪个表？ article

3.field content：false 不要content

4.return

2.在api中导出

（原理不在此赘述）


export const get_list = (data) => {
	return $http({
		url: 'get_list',
		data
	})
}

3.list.vue组件中引用这个api

1.methods:里面写函数


getList()
			{
				this.$api.get_list().then(res=>{
					console.log('小狗狗',res);//验证对不对 res
					this.list=res.data
					const {data}=res;//这俩一个效果
					console.log('小白白',data);
				})
				//console.log('小狗狗');

2.组件生命周期调用


created(){
			this.getList()
		},

效果：

4.发送给<list-item :list="list"></list-item> 这个组件

list中发送： :list="list"

list-item接收：props中接收->


props: {//获取 list引用api中数据库返回的数组
			list: {
				type: Array,
				default () {
					return []
				}
			},

<list-item :list="list"></list-item>

onLoad 在页面，created 组件

5.list-item组件处理它：

1.用咱拿到的数组 v-for="item in list" (看这里的item 它是list数组中的一个哈 鸟小五脏俱全）

<list-card mode="base" :item="item" v-for="item in list" :key="item._id"></list-card>

但这样只是拿到了几个并没有真正把数据整到界面上因为咱那个界面是 list-card里面写的界面内容--->传给list-card

2.item传给list-card

云函数获取的数组随便展开一条，发现里面有mode

接收：props: {
           item: {
               type: Object,
               default () {
                   return {}
               }
           }
       },

使用：

先复制一个一共仨一个道理这里只copy了一个哈


<view v-if="item.mode === 'base'" class="listcard">
			<view class="listcard-image">
				<image :src="item.cover[0]" mode="aspectFill"></image>
			</view>
			<view class="listcard-content">
				<view class="listcard-content__title">
					<text>{{item.title}}</text>
					
				</view>
				<view class="listcard-content__des">
					<view class="listcard-content__des-label">
						<view class="listcard-content__des-label-item">{{item.classify}}</view>
					</view>
					<view class="listcard-content__des-browse">{{item.browse_count}}浏览</view>
				</view>
			</view>
		</view>

这样就可以啦！！！

三、实现标签分类

很明显哈这里面需要根据标签名传参数所以云函数得能接受参数

1.在云函数里接收参数


	const {
		
		name,
		
	} = event//等同 var name=event.name

2.用聚合


const list =await db.collection('article')	//2.创建
	.aggregate()//获取聚合操作实例
	.match({
		classify:'前端开发'
	})//筛选出classify是前端开发的
	.project({
		content:0
	})//类似.field
	.end()

返回的结果全是前端开发的

3.改参数哈完成懒加载！

所谓懒加载就是，存到数组里面加载过的不用每次都加载


watch: {
			tab(newVal) {
				if (newVal.length === 0) return
				this.listCatchData = {}
				this.getList(this.activeIndex)
			}
		},
		methods: {
			getList(current) {
				this.$api.get_list({
					name: this.tab[current].name,
				}).then(res => {
					console.log(res);
					const {
						data
					} = res
					this.$set(this.listCatchData, current, data)
				})
			},
			change(e) {
				console.log('嘘嘘嘘', e);
				const {
					current
				} = e.detail; //取到 current这个数据
				this.$emit('change', current)
				console.log("呆呆：", this.tab[current].name)
				console.log("笨笨：", current)
				this.getList(current)
			},

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/312421

uniapp实现选项卡绑定切换、懒加载_uniapp 选项卡

一、选项卡切换

1.用swiper

2.绑定事件 用 change事件