uniapp 社区app点赞功能

<template><view class="p-2"><!-- 列表样式 --><view class="flex align-center justify-between" ><view class="flex align-center"  @click="openSpace"><image class="rounded-circle mr-2" v-if="item.userpic" :src="item.userpic " mode="" style="width: 65rpx; height: 65rpx; " lazy-load></image><view><view class="font" style="line-height: 1.2;">昵称：{{item.username}}</view><text class="font-sm text-light-muted" style="  line-height: 1.2">{{item.newstime}}</text></view></view><view class="flex align-center justify-center rounded bg-main text-white animated" @click="follow(index)" v-if="!item.isFollow" hover-class="jello"  style="width: 90rpx; height: 50rpx;"> 关注</view></view><!-- 标题 --><view class="font-md my-1" @click="openDetail">{{item.title}}</view><!-- 图片 --><view @click="openDetail"><image :src="item.titlepic" class="w-100" mode="widthFix" style="height: 350rpx; border-radius: 5rpx;" lazy-load></image></view><!-- 图标按钮 --><view class="flex align-center" ><view class="flex align-center justify-center flex-1 animated" hover-class="jello text-main"  @click="doSupport('support')" :class="item.support.type === 'support' ? 'support_color' : '' "><text class="iconfont icon-dianzan1 mr-2"></text><text>{{item.support.support_count > 0 ? item.support.support_count : '顶'}}</text></view><view class="flex align-center justify-center flex-1 animated" hover-class="jello text-main" @click="doSupport('unsupport')" :class="item.support.type === 'unsupport' ? 'support_color' : '' "><text class="iconfont icon-cai mr-2"></text><text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count : '踩'}}</text></view><view class="flex align-center justify-center flex-1 animated" hover-class="jello text-main"><text class="iconfont icon-pinglun2 mr-2"></text><text>{{item.support.comment_count}}</text></view><view class="flex align-center justify-center flex-1 animated" hover-class="jello text-main"><text class="iconfont icon-fenxiang mr-2"></text><text>{{item.support.share_num}}</text></view></view></view>
</template><script>export default {props:{item : Object,index: Number},methods:{// 进入个人空间openSpace(){console.log("打开个人空间")},// 关注follow(index){this.$emit("follow",index)},// 个人详情openDetail(){console.log("进入详情")},// 顶doSupport(type){this.$emit("doSupport",{index:this.index,type})},}}
</script><style>.support_color{color: #ff0c2c;}
</style>
// 上面是子组件
//下面是父组件
<template><view class="content"><block v-for="(item,index) in list" :key="index"><common-list :item="item" :index="index" @follow="follow" @doSupport="doSupport"></common-list><divider></divider></block></view>
</template><script>import commonList from '@/components/common/common-list.vue'export default {components:{commonList},data() {return {list:[{username:'张三',userpic:'../../static/default.jpg',newstime:'2019-07-10 下午 04：10',isFollow:false,title:'张三',titlepic:'../../static/demo/datapic/11.jpg',support:{type:"",support_count:0,unsupport_count:0},comment_count:2,share_num:2},{username:'张三',userpic:'../../static/default.jpg',newstime:'2019-07-10 下午 04：10',isFollow:false,title:'张三',titlepic:'../../static/demo/datapic/11.jpg',support:{type:"",support_count:1,unsupport_count:2},comment_count:2,share_num:3},{username:'张三',userpic:'../../static/default.jpg',newstime:'2019-07-10 下午 04：10',isFollow:false,title:'张三',titlepic:'../../static/demo/datapic/11.jpg',support:{type:"",support_count:1,unsupport_count:2},comment_count:2,share_num:3}]}},onLoad() {},methods: {// 关注follow(e){this.list[e].isFollow = trueuni.showToast({title:"关注成功" })},// 顶，踩操作doSupport(e){// 拿到当前对象let item = this.list[e.index]let msg = e.type === "support" ? "顶" : "踩"// 之前没有操作过if(item.support.type === ""){item.support[e.type+'_count']++} else if(item.support.type === "support" && e.type === "unsupport" ){// 顶 -1item.support.support_count--// 顶 +1item.support.unsupport_count++}// 之前踩过 , 现在要顶else if(item.support.type === "unsupport" && e.type === "support" ){// 顶 +1item.support.support_count++// 顶 -1item.support.unsupport_count--}item.support.type = e.typeuni.showToast({title: msg + "成功"})}}}
</script><style></style>

uniapp 社区app点赞功能相关推荐

基于spring-boot+uni-app实现app支付功能（微信/支付宝）服务端
基于spring-boot+uni-app实现app支付功能(微信/支付宝)服务端支付宝支付 1 准备工作申请支付能力接口加签方式 2代码依赖支付宝支付配置类支付宝控制层异步通知微信支 ...
宠物电商社区APP的设计与实现
摘要:为了设计并实现具有宠物产品商城和问答社区功能的APP,通过比较国内外宠物行业电商发展现状和国内已有的宠物电商平台的优缺点,分析可行性和需求,从而进行详细设计和实现.该APP后台采用SSM框架 ...
Axure社区产品app原型通用版+prd通用产品需求文档+产品结构+业务流程+社区产品信息结构功能脑图
在现在移动互联网入口大局已定的背景下,虎口夺食的难度还是非常大的,资金.资源.团队都是决定性因素. 一个好的社区类app可以帮助人们解决生活上.精神上的问题.现在移动互联网发展如此迅猛,智能手机的普及 ...
uniapp中的分享功能实现(APP,小程序，公众号)
uniapp中的分享功能实现(APP,小程序,公众号) 1.APP端的分享 app端的分享可以直接使用uniapp封装的方法uni.share,uni-app的App引擎已经封装了微信.QQ.微博的分 ...
uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息
基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...
UniAPP社区项目实战教案
千锋教育 UniAPP 社区论坛项目多端开发实战学习目的: 通过学习,对标企业级「大前端」开发实践标准,从零到一构建「社区论坛类」客户端应用项目, 输出相关 Web H5.微信小程序.安卓 AP ...
uniapp之APP开发
文章目录前言一.uniapp跨端开发app注意事项二.创建一个app步骤三.开发问答社区四.关于APP现有功能,使用uniapp是否能够实现五.uniapp开发app的一些案例前言最近 ...
听书类APP消息功能竞品分析
听书类APP消息功能竞品分析体验环境行业分析确定竞品竞品对比(纵向) 蜻蜓FM 懒人听书喜马拉雅业务/产品模式异同运营及推广策略归纳和结论体验环境对于听书app的用户而言,消息虽然 ...
《uni-app》uni-app实现疯狂点赞效果（一）
这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言-博主看到后会去代替大家踩坑的- 主页: oliver尹的主页格言: 跌倒了爬起来就好- ...

uniapp 社区app点赞功能

uniapp 社区app点赞功能相关推荐

最新文章

热门文章