微信小程序:a==b===c,自己项目经验的Q&A,点赞数界面和数据库同步更新【诗书画唱】( 四 )
/* components/epsoide/index.wxss */
.container {
display: inline-flex;
height: 60rpx;
flex-direction: row;
}
.plain {
font-size: 32rpx;
}
.index {
font-size: 60rpx;
line-height: 60rpx;
font-weight: 800;
margin-right: 14rpx;
}
.index-container {
display: flex;
flex-direction: row;
align-items: baseline;
}
.date-container {
display: flex;
flex-direction: column;
margin-top: 6rpx;
}
.month {
font-size: 24rpx;
line-height: 24rpx;
}
.year {
font-size: 20rpx;
}
.line {
height: 44rpx;
border-left: 1px solid black;
margin-right: 14rpx;
}
// components/like/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
//如果不声明变量数据类型 , 那么数据的内容可能无法在别的文件中调用
count: Number,
like: Boolean,
//自己写的代码 START
// bookImage:String
//自己写的代码 END
},
/**
* 组件的初始数据
*/
data: {
yesSrc: '/components/like/images/like.png',
noSrc: '/components/like/images/like@dis.png',
},
/**
* 组件的方法列表
*/
methods: {
onLike{
let count = this.properties.count
let like = this.properties.like
//自己写的代码 START
// let bookImage= this.properties.image
//自己写的代码 END
count = like ? count - 1 : count + 1
//更新组件的状态
this.setData({
count,
like: !like,
//自己写的代码 START
// bookImage:bookImage
//自己写的代码 END
})
//关于数据库和页面的点赞数同步更新的部分 START
//触发绑定在like组件上的自定义事件
//1、需要触发的自定义事件的名字
//2、自定义事件需要传递的数据对象
//3、配置事件的属性
this.triggerEvent('myLike',{
state: this.properties.like ? 'like' : 'cancel',
nums: this.properties.count
},{})
//关于数据库和页面的点赞数同步更新的部分 END
}
}
})
<!--components/like/index.wxml-->
<view class="container" bind:tap="onLike">
<image src="http://news.hoteastday.com/a/{{like =='1' ? yesSrc : noSrc}}" />
<text>{{count}}</text>
</view>
<!-- <image src="http://news.hoteastday.com/a/{{bookImage}}" />
- |每小时收费500元?“女陪玩”出现天价,“灰色生意”该叫停了
- 火山喷发|西班牙火山喷发60天不停歇,生成千顷土地,地球“小冰期”来了?
- 美团|支付二维码管制,微信、支付宝躺枪,谁是最大赢家?
- MIUI|小米12或下个月底发布:虽错失首发权,但MIUI13更稳了!
- 小米科技|矿难凶猛来袭 给新机升级显卡提升有多大?
- 小米科技|小米12X曝光:骁龙870+6.28英寸小屏,手感跟小米6类似
- MIUI|MIUI 13即将到来,小米mix4等9款机型首批升级
- 电子商务|“退微信群”谣言背后:总有人用阴谋论湮没常识
- 小行星|达安科普:等温扩增和荧光定量PCR在新冠核酸快速检测中的应用
- 英伟达|?这家电池公司有什么亮点,居然引的小米华为联合投资?