uniapp实现选项卡绑定切换、懒加载
一、选项卡切换
目录
一、选项卡切换
1.用swiper
2.绑定事件 用 change事件
绑定change
目标组件接收
子组件发送
index里面传参数
tab里面改
怎么实现 点击tab——>滑动？
1.tab 传给index
2.index传给list
二、从数据库中拿数据（）
别看“二、”这么多哈 都是虚的 目的就是 把云函数获取的数组 传给list-card list引用后 传给list-item(看看那个云数组有几条？好显示) ->list-card
1.创建新云函数
1.创建数据库引用
2.对哪个表？ article
3.field content：false 不要content
4.return
2.在api中导出
3.list.vue组件中引用这个api
1.methods:里面写函数
2.组件生命周期调用
效果：
4.发送给 这个组件
list-item接收：props中接收->
5.list-item组件处理它：
2.item传给list-card
云函数获取的数组 随便展开一条，发现里面有mode
使用：
三、实现标签分类
1.在云函数里接收参数
2.用聚合
3.改参数哈 完成懒加载！
1.用swiper
我是小狗
我是小狗
我是小狗
效果：可以左右滑动
2.绑定事件 用 change事件
绑定change
//这里的@change可是系统的哈
目标组件接收
@自己定义的名=“用啥处理”
这里的@change是自己定义的哈 可不是系统的 是因为咱 在定义子组件发送时间名的时候 设置的
子组件发送
this.$emit('change', current)
change(e)
{
console.log('嘘嘘嘘',e);
const {current}=e.detail;//取到 current这个数据
this.$emit('change', current)
}index里面传参数
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用 props接收一个activeIndex
activeIndex:{
type:Number,
default:0
}接收后直接
完成了双向滑动啦
二、从数据库中拿数据（）
别看“二、”这么多哈 都是虚的 目的就是 把云函数获取的数组 传给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中发送： :list="list"
list-item接收：props中接收->
props: {//获取 list引用api中数据库返回的数组
list: {
type: Array,
default () {
return []
}
},onLoad 在页面 ，created 组件
5.list-item组件处理它：
1.用咱拿到的数组 v-for="item in list" (看这里的item 它是list数组中的一个哈 鸟小 五脏俱全）
但这样只是拿到了几个 并没有真正把数据整到界面上 因为咱那个界面是 list-card里面写的界面内容--->传给list-card
2.item传给list-card
云函数获取的数组 随便展开一条，发现里面有mode
接收：props: {
item: {
type: Object,
default () {
return {}
}
}
},
使用：
先复制一个 一共仨 一个道理 这里只copy了一个哈
{{item.title}}
{{item.classify}}
{{item.browse_count}}浏览
这样就可以啦！！！
三、实现标签分类
很明显哈 这里面需要根据标签名传参数 所以云函数得能接受参数
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)
},ok