需求：狀態(tài)1：用戶(hù)沒(méi)有操作過(guò)，即既沒(méi)點(diǎn)贊和差評(píng)；狀態(tài)二：用戶(hù)點(diǎn)贊過(guò)；狀態(tài)三：用戶(hù)差評(píng)過(guò)。點(diǎn)贊或差評(píng)過(guò)后無(wú)法取消，可切換。如下圖：

dom結(jié)構(gòu)：

<!-- 頂 -->
? ? ? <view class="flex-1 flex ai-center jc-center animate__animated animate__fast" hover-class="animate__jello text-main"
? ? ? ? @click="DoSupport('support')" :class="item.support.type === 'support'? 'support-active':''">
? ? ? ? <text class="iconfont icon-dianzan2 mr-2"></text>
? ? ? ? <text>{{item.support.support_count}}</text>
? ? ? </view>
? ? ? <!-- 踩 -->
? ? ? <view class="flex-1 flex ai-center jc-center animate__animated animate__fast" hover-class="animate__jello text-main"
? ? ? ? @click="DoSupport('unsupport')" :class="item.support.type === 'unsupport'? 'support-active':''">
? ? ? ? <text class="iconfont icon-cai mr-2"></text>
? ? ? ? <text>{{item.support.unsupport_count}}</text>
</view>

list數(shù)據(jù)：

const demo = [{
? ? username: "昵稱(chēng)",
? ? userpic: "/static/tabber/indexSelected.png",
? ? newstime: "2021-1-1 下午1：00",
? ? isFollow: false,
? ? title: "我是標(biāo)題",
? ? titlepic: "/static/2956568.jpg",
? ? support: {
? ? ? type: "support", //支持
? ? ? support_count: 1,
? ? ? unsupport_count: 2
? ? },
? ? comment_count: 2,
? ? share_num: 2
? }, {
? ? username: "昵稱(chēng)",
? ? userpic: "/static/tabber/indexSelected.png",
? ? newstime: "2021-1-1 下午1：00",
? ? isFollow: false,
? ? title: "我是標(biāo)題",
? ? titlepic: "/static/2956568.jpg",
? ? support: {
? ? ? type: "unsupport", //不支持
? ? ? support_count: 1,
? ? ? unsupport_count: 2
? ? },
? ? comment_count: 2,
? ? share_num: 2
? }, {
? ? username: "昵稱(chēng)",
? ? userpic: "/static/tabber/indexSelected.png",
? ? newstime: "2021-1-1 下午1：00",
? ? isFollow: false,
? ? title: "我是標(biāo)題",
? ? titlepic: "/static/2956568.jpg",
? ? support: {
? ? ? type: "", //無(wú)操作
? ? ? support_count: 1,
? ? ? unsupport_count: 2
? ? },
? ? comment_count: 2,
? ? share_num: 2
? }]

list數(shù)組每個(gè)item定義了一個(gè)type，當(dāng)type為support則為支持；當(dāng)type為unsupport則為不支持；當(dāng)type為空時(shí)則為無(wú)操作。

點(diǎn)擊方法：點(diǎn)擊之后子組件通知父組件并傳遞點(diǎn)擊的是哪篇文章（index），點(diǎn)擊的是贊還是踩（支持還是不支持）

// 頂踩操作
DoSupport(type) {
? ? ? ? // 通知父組件
? ? ? ? this.$emit('doSupport', {
? ? ? ? ? type: type,
? ? ? ? ? index: this.index
? ? ? ? })
}

父組件中接收：

邏輯是：

拿到當(dāng)前對(duì)象：let item = this.list[e.index]

1.如果是之前沒(méi)有操作過(guò)，則改變它的type，并讓它的相對(duì)應(yīng)的count加1；

2.如果是之前頂過(guò)，現(xiàn)在點(diǎn)踩，那么則改變它的type為unsupport，并讓頂?shù)腸ount數(shù)減一同時(shí)踩的count數(shù)加一；

3.如果是之前踩過(guò)，現(xiàn)在點(diǎn)贊，那么則改變它的type為support，并讓頂?shù)腸ount數(shù)加一同時(shí)踩的count數(shù)減一；

// 頂踩操作
doSupport(e) {
? ? ? ? // 拿到當(dāng)前對(duì)象
? ? ? ? let item = this.list[e.index]
? ? ? ? // 之前沒(méi)有操作過(guò)
? ? ? ? if (item.support.type === '') {
? ? ? ? ? item.support.type = e.type
? ? ? ? ? item.support[e.type + '_count']++
? ? ? ? ? return
? ? ? ? }
? ? ? ? // 之前頂過(guò)
? ? ? ? if (item.support.type === 'support' && e.type === 'unsupport') {
? ? ? ? ? item.support.type = e.type
? ? ? ? ? // 踩+1
? ? ? ? ? item.support.unsupport_count++
? ? ? ? ? // 頂-1
? ? ? ? ? item.support.support_count--
? ? ? ? ? return
? ? ? ? }
? ? ? ? // 之前踩過(guò)
? ? ? ? if (item.support.type === 'unsupport' && e.type === 'support') {
? ? ? ? ? item.support.type = e.type
? ? ? ? ? // 頂+1
? ? ? ? ? item.support.support_count++
? ? ? ? ? // 踩-1
? ? ? ? ? item.support.unsupport_count--
? ? ? ? ? return
? ? ? ? }
? ? ? },

如此，文章的點(diǎn)贊與差評(píng)的代碼已完成。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: