i父组件 ndex.vue
<template>
<view>
<scroll-view scroll-x class="scroll-row border-bottom" :scroll-into-view="scrollIntoView" scroll-with-animation style="height: 75rpx;">
<view
v-for="(item, index) in tabBars"
:key="index"
:id="'tab' + index"
class="scroll-row-item px-3 py-1 font-sm"
:class="currSelectBar == index ? 'select-color-little font-weight-bolder font ' : ''"
@click="changeBar(index)"
>
{{ item.name }}
</view>
</scroll-view>
<swiper :current="currSelectBar" @change="swiperBar" :style="'height:' + infoListHeight + 'px'">
<swiper-item v-for="(item, index) in tabBars" :key="index">
<view class="swiper-item">
<scroll-view scroll-y="true" style="height: 100%;" :style="'height:' + infoListHeight + 'px'">
<!-- 列表 -->
<block v-for="(item2, index2) in tabInfoData.get(index)" :key="index2">
<info-list-item :item="item2" :index="index2" @followOhter="followOhter" @infoLike="infoLike"></info-list-item>
<divider />
</block>
</scroll-view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import infoListItem from '@/components/common/info-list-item.vue';
export default {
components: {
infoListItem
},
data() {
return {
//列表高度
infoListHeight: null,
// 顶部选项卡选项数据
tabBars: [
{ name: '关注', id: 1 },
{ name: '推荐', id: 2 },
{ name: '软件工程', id: 3 },
{ name: '物联网', id: 4 },
{ name: '财务管理', id: 5 },
{ name: '新能源车', id: 6 },
{ name: '园林', id: 7 },
{ name: '法律', id: 8 }
],
scrollIntoView: 'tab1',
currSelectBar: 1,
// 每个选项卡下的资讯列表数据
tabInfoData: new Map()
};
},
onLoad() {
//计算列表也高度
uni.getSystemInfo({
success: res => {
this.infoListHeight = res.windowHeight - uni.upx2px(75 + 1);
}
});
//获取列表页数据
this.getData();
},
methods: {
getData() {
this.tabBars.forEach((item, index) => {
this.tabInfoData.set(index, [
{
userName: '小明' + index,
pushDate: '2022-9-26 晚上23:47',
userPic: '../../static/default.jpg',
infoContent:
'“重阳节又叫登高节、重九节、菊花节等等，寓意平安、健康长寿。对于重阳节节日名称的由来，程鹏说，在《易经》中，“九”数为阳数，“九九”两阳数相重，所以称作“重阳”；因日与月皆逢九，故又称为“重九”。”',
infoPreviewPic: '../../static/demo/banner2.jpg',
hasLike: false,
hasFollow: true,
likeCount: 999,
commentCount: 88,
shareCount: 77
},
{
userName: '小明2',
pushDate: '2022-9-26 晚上23:47',
userPic: '../../static/default.jpg',
infoContent:
'“重阳节又叫登高节、重九节、菊花节等等，寓意平安、健康长寿。对于重阳节节日名称的由来，程鹏说，在《易经》中，“九”数为阳数，“九九”两阳数相重，所以称作“重阳”；因日与月皆逢九，故又称为“重九”。”',
infoPreviewPic: '',
hasFollow: false,
hasLike: true,
likeCount: 888,
commentCount: 66,
shareCount: 55
},
{
userName: '小明3',
pushDate: '2022-9-26 晚上23:47',
userPic: '../../static/default.jpg',
infoContent:
'“重阳节又叫登高节、重九节、菊花节等等，寓意平安、健康长寿。对于重阳节节日名称的由来，程鹏说，在《易经》中，“九”数为阳数，“九九”两阳数相重，所以称作“重阳”；因日与月皆逢九，故又称为“重九”。”',
hasFollow: true,
hasLike: false,
likeCount: 444,
commentCount: 33,
shareCount: 22
}
]);
});
},
//监听swiperBar滑动
swiperBar(e) {
this.changeBar(e.detail.current);
},
//关注
followOhter: function(index) {
this.tabInfoData.get(this.currSelectBar)[index].hasFollow = true;
uni.showToast({
title: '关注成功,'
});
},
//关注
// followOhter: function(index) {
// this.tabInfoData.get(this.currSelectBar)[index].hasFollow = true;
// let tempStr=JSON.stringify(this.tabInfoData)
// this.tabInfoData=new Map
// this.tabInfoData=JSON.parse(tempStr)
// uni.showToast({
// title: '关注成功'
// });
// },
//点赞或者取消点赞
infoLike: function(index) {
//旧值取反，得到现在是点赞还是取消点赞
var hasLikeCurr = this.tabInfoData.get(this.currSelectBar)[index].hasLike == true ? false : true;
this.tabInfoData.get(this.currSelectBar)[index].hasLike = hasLikeCurr;
if (hasLikeCurr) {
this.tabInfoData.get(this.currSelectBar)[index].likeCount += 1;
} else {
this.tabInfoData.get(this.currSelectBar)[index].likeCount -= 1;
}
},
//切换选项卡
changeBar: function(index) {
this.currSelectBar = index;
this.scrollIntoView = 'tab' + index;
}
}
};
</script>
<style></style>子组件
<template>
<view class="p-2">
<!-- 头像 -->
<view class="flex align-center justify-between">
<view class="flex align-center justify-start">
<image class="border-radius-100" :src="item.userPic" style="height: 65rpx; width: 65rpx;" lazy-load @click.stop="openMy"></image>
<view class="flex-column justify-between ml-2">
<view class="font" style=" line-height: 1.5;" @click.stop="openMy">{{ item.userName }}</view>
<view class="font-small text-gray">{{ item.pushDate }}</view>
</view>
</view>
<view
class="flex align-center justify-center rounded bu-bg-color text-white font animated faster"
style="width: 90rpx; height: 50rpx;"
hover-class="rubberBand"
@click="followOhter"
v-if="item.hasFollow != true"
>
关注
</view>
</view>
<view @click="openInfoDetail">
<!-- 标题+略所文 -->
<view class="font">{{ item.infoContent }}</view>
<!-- 图片 -->
<image class="rounded w-100" v-show="item.infoPreviewPic" :src="item.infoPreviewPic" style="height: 350rpx;"></image>
</view>
<!-- 功能栏 -->
<view class="flex align-center">
<view class="flex justify-center align-center flex-1" hover-class="select-color-little" @click="infoShare">
<text class="iconfont icon-fenxiang mr-10"></text>
<text>{{ item.shareCount ? item.shareCount : '分享' }}</text>
</view>
<view class="flex justify-center align-center flex-1" hover-class="select-color-little" @click="openCommentList">
<text class="iconfont icon-pinglun2 mr-10"></text>
<text>{{ item.commentCount ? item.commentCount : '评论' }}</text>
</view>
<view class="flex justify-center align-center flex-1" :class="item.hasLike == true ? 'select-color-little' : ''" @click="infoLike">
<text class="iconfont icon-dianzan2 mr-10"></text>
<text>{{ item.likeCount ? item.likeCount : '点赞' }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
item: Object,
index: Number
},
methods: {
//打开个人空间
openMy: function() {
console.log('点击头像进入个人空间');
},
followOhter: function() {
console.log('关注这个人哦');
console.log(this.item);
console.log(this.item.hasFollow != true);
//通知父组件
this.$emit('followOhter', this.index);
},
infoLike: function() {
console.log('点赞');
this.$emit('infoLike', this.index);
},
openCommentList: function() {
console.log('打开评论列表');
},
infoShare: function() {
console.log('分享该资讯');
},
openInfoDetail: function() {
console.log('打开资讯详情');
}
}
};
</script>
<style></style>
1 个回复
zZZ1Ma
v-for="(item2, index2) in tabInfoData.get(index)" :key="index2" 用计算属性或方法返回tabInfoData.get(index)用于循环试试