微信小程序:a==b===c,自己项目经验的Q&A,点赞数界面和数据库同步更新【诗书画唱】( 四 )



微信小程序:a==b===c,自己项目经验的Q&A,点赞数界面和数据库同步更新【诗书画唱】
本文插图

微信小程序: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;
}

微信小程序:a==b===c,自己项目经验的Q&A,点赞数界面和数据库同步更新【诗书画唱】
本文插图
// 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
}
}
})

微信小程序:a==b===c,自己项目经验的Q&A,点赞数界面和数据库同步更新【诗书画唱】
本文插图
<!--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}}" />