新聞中心
想了解更多內容,請訪問:

創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設服務,團隊從業(yè)經驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為金林企業(yè)提供專業(yè)的成都網(wǎng)站設計、做網(wǎng)站,金林網(wǎng)站改版等技術服務。擁有十多年豐富建站經驗和眾多成功案例,為您定制開發(fā)。
和華為官方戰(zhàn)略合作共建的鴻蒙技術社區(qū)
https://harmonyos./#zz
本文主要描述對鴻蒙幻燈片組件、跑馬燈組件、提示框、提示菜單、頁面跳轉以及對話框的應用
幻燈片組件:
視圖及樣式:
- .container {
- width: 100%;
- height: 1500px;
- display: flex;
- flex-direction: column;
- }
- .c1{
- width: 100%;
- height: 35%;
- }
- .image-animator{
- width: 100%;
- height: 100%;
- }
業(yè)務邏輯層通過fetch請求向nginx反向代理服務請求所需數(shù)據(jù)
- import fetch from '@system.fetch';
- export default {
- data: {
- imagesDatas:[]
- },
- onInit(){
- fetch.fetch({
- //url對應的地址為通過內網(wǎng)穿透工具natapp映射出的nginx反向代理服務的地址
- url:'http://ibk3v7.natappfree.cc/text/images0.json',
- responseType:"json",
- success:(resp)=>{
- let datas = JSON.parse(resp.data);
- this.imagesDatas = datas.imagedatas;
- }
- });
- }
images0.json文件中定義的數(shù)據(jù):
效果圖(圖片是可以自動播放的):
跑馬燈組件:
效果圖:
鴻蒙的彈出菜單、提示框、頁面跳轉的應用
視圖和樣式:
- .container {
- width: 100%;
- height: 1500px;
- display: flex;
- flex-direction: column;
- }
- .c1{
- width: 100%;
- height: 35%;
- }
- .c2{
- width: 100%;
- height: 8%;
- }
業(yè)務邏輯層:
- import prompt from '@system.prompt';
- import router from '@system.router';
- export default {
- data: {
- },
- //點擊按鈕觸發(fā) 彈出顯示菜單 事件
- clickbutton(){
- //顯示id為 menuid 的菜單,此菜單出現(xiàn)位置默認為屏幕左上角原點,可通過在show()中添加坐標來改變
- //this.$element("menuid").show();
- this.$element("menuid").show({
- x:100,
- y:550
- });
- },
- //選中彈出菜單中的項觸發(fā)事件
- selectmenu(e){
- let path = e.value;
- //鴻蒙的提示框
- prompt.showToast({
- message:path
- });
- if(path=="aaa"){
- //鴻蒙提供的頁面跳轉
- router.push({
- uri:'pages/aaa/aaa'
- });
- }else if(path=="bbb"){
- router.push({
- uri:'pages/bbb/bbb'
- });
- }else if(path=="ccc"){
- router.push({
- uri:'pages/ccc/ccc'
- });
- }
- }
- }
效果圖(點擊按鈕彈出菜單后點擊對應菜單觸發(fā)跳轉頁面的事件):
鴻蒙的對話框
視圖和樣式:
邏輯層:
- import prompt from '@system.prompt';
- export default {
- data: {
- },
- onclick(){
- //鴻蒙的對話框
- prompt.showDialog({
- title:"對話框",
- message:"確定刪除這條消息么?",
- buttons:[{"text":"確定","color":"#00E5EE"},
- {"text":"取消","color":"#00E5EE"}],
- success:function(e){
- if(e.index==0){
- //鴻蒙的提示框
- prompt.showToast({
- message:"您點擊了確定"
- });
- }else if(e.index==1){
- prompt.showToast({
- message:"您點擊了取消"
- });
- }
- }
- });
- }
- }
效果圖:
?著作權歸作者和HarmonyOS技術社區(qū)共同所有,如需轉載,請注明出處,否則將追究法律責任。
想了解更多內容,請訪問:
和華為官方戰(zhàn)略合作共建的鴻蒙技術社區(qū)
https://harmonyos./#zz
網(wǎng)站欄目:鴻蒙JS開發(fā)6鴻蒙的提示框、對話框和提示菜單的應用
本文URL:http://m.fisionsoft.com.cn/article/dpisegp.html


咨詢
建站咨詢
