建站
咨詢
售后
建站咨詢
新聞中心
添加交互通過(guò)在組件上關(guān)聯(lián)事件實(shí)現(xiàn)。本節(jié)將介紹如何用 div、text、image 組件關(guān)聯(lián) click 事件，構(gòu)建一個(gè)如下圖所示的點(diǎn)贊按鈕。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、瀏陽(yáng)網(wǎng)站維護(hù)、網(wǎng)站推廣。
圖1 點(diǎn)贊按鈕效果
點(diǎn)贊按鈕通過(guò)一個(gè) div 組件關(guān)聯(lián) click 事件實(shí)現(xiàn)。div 組件包含一個(gè) image 組件和一個(gè) text 組件：
- image 組件用于顯示未點(diǎn)贊和點(diǎn)贊的效果。click 事件函數(shù)會(huì)交替更新點(diǎn)贊和未點(diǎn)贊圖片的路徑。
- text 組件用于顯示點(diǎn)贊數(shù)，點(diǎn)贊數(shù)會(huì)在 click 事件的函數(shù)中同步更新。
click 事件作為一個(gè)函數(shù)定義在 js 文件中，可以更改 isPressed 的狀態(tài)，從而更新顯示的 image 組件。如果 isPressed 為真，則點(diǎn)贊數(shù)加 1。該函數(shù)在 hml 文件中對(duì)應(yīng)的 div 組件上生效，點(diǎn)贊按鈕各子組件的樣式設(shè)置在 css 文件當(dāng)中。具體的實(shí)現(xiàn)示例如下：
添加交互通過(guò)在組件上關(guān)聯(lián)事件實(shí)現(xiàn)。本節(jié)將介紹如何用 div、text、image 組件關(guān)聯(lián) click 事件，構(gòu)建一個(gè)如下圖所示的點(diǎn)贊按鈕。
圖1 點(diǎn)贊按鈕效果
點(diǎn)贊按鈕通過(guò)一個(gè) div 組件關(guān)聯(lián) click 事件實(shí)現(xiàn)。div 組件包含一個(gè) image 組件和一個(gè) text 組件：
image 組件用于顯示未點(diǎn)贊和點(diǎn)贊的效果。click 事件函數(shù)會(huì)交替更新點(diǎn)贊和未點(diǎn)贊圖片的路徑。
text 組件用于顯示點(diǎn)贊數(shù)，點(diǎn)贊數(shù)會(huì)在 click 事件的函數(shù)中同步更新。
click 事件作為一個(gè)函數(shù)定義在 js 文件中，可以更改 isPressed 的狀態(tài)，從而更新顯示的 image 組件。如果 isPressed 為真，則點(diǎn)贊數(shù)加1。該函數(shù)在 hml 文件中對(duì)應(yīng)的 div 組件上生效，點(diǎn)贊按鈕各子組件的樣式設(shè)置在 css 文件當(dāng)中。具體的實(shí)現(xiàn)示例如下：
{{total}}
/* xxx.css */
.like {
width: 104px;
height: 54px;
border: 2px solid #bcbcbc;
justify-content: space-between;
align-items: center;
margin-left: 72px;
border-radius: 8px;
}
.like-img {
width: 33px;
height: 33px;
margin-left: 14px;
}
.like-num {
color: #bcbcbc;
font-size: 20px;
margin-right: 17px;
}
// xxx.js
export default {
data: {
likeImage: '/common/unLike.png',
isPressed: false,
total: 20,
},
likeClick() {
var temp;
if (!this.isPressed) {
temp = this.total + 1;
this.likeImage = '/common/like.png';
} else {
temp = this.total - 1;
this.likeImage = '/common/unLike.png';
}
this.total = temp;
this.isPressed = !this.isPressed;
},
}
JS UI 框架還提供了很多表單組件，例如開關(guān)、標(biāo)簽、滑動(dòng)選擇器等，以便于開發(fā)者在頁(yè)面布局時(shí)靈活使用和提高交互性，詳見容器組件。/* xxx.css */
.like {
width: 104px;
height: 54px;
border: 2px solid #bcbcbc;
justify-content: space-between;
align-items: center;
margin-left: 72px;
border-radius: 8px;
}
.like-img {
width: 33px;
height: 33px;
margin-left: 14px;
}
.like-num {
color: #bcbcbc;
font-size: 20px;
margin-right: 17px;
}// xxx.js
export default {
data: {
likeImage: '/common/unLike.png',
isPressed: false,
total: 20,
},
likeClick() {
var temp;
if (!this.isPressed) {
temp = this.total + 1;
this.likeImage = '/common/like.png';
} else {
temp = this.total - 1;
this.likeImage = '/common/unLike.png';
}
this.total = temp;
this.isPressed = !this.isPressed;
},
}JS UI 框架還提供了很多表單組件，例如開關(guān)、標(biāo)簽、滑動(dòng)選擇器等，以便于開發(fā)者在頁(yè)面布局時(shí)靈活使用和提高交互性。
當(dāng)前題目：創(chuàng)新互聯(lián)鴻蒙OS教程：鴻蒙OS添加交互
分享URL：http://m.fisionsoft.com.cn/article/dhcehec.html
