日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

本章節(jié)主要介紹如何開發(fā)一個 JS FA 應用。此應用相對于 Hello World 應用模板具備更復雜的頁面布局、頁面樣式和頁面邏輯。該頁面可以通過將焦點移動到不同顏色的圓形來選擇不同的食物圖片，也可以進行添加到購物車操作，應用效果圖如下。

站在用戶的角度思考問題，與客戶深入溝通，找到金塔網(wǎng)站設(shè)計與金塔網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋金塔地區(qū)。

圖1JS FA應用效果圖

構(gòu)建頁面布局

開發(fā)者在 index.hml 文件中構(gòu)建頁面布局。在進行代碼開發(fā)之前，首先要對頁面布局進行分析，將頁面分解為不同的部分，用容器組件來承載。根據(jù) JS FA 應用效果圖，此頁面一共分成三個部分：標題區(qū)、展示區(qū)和購物車區(qū)。根據(jù)此分區(qū)，可以確定根節(jié)點的子節(jié)點應按列排列。

標題區(qū)是由兩個按列排列的 tex t組件實現(xiàn)，購物車區(qū)由一個 text 組件構(gòu)成。展示區(qū)由按行排列的 swiper 組件和 div 組件組成，如下圖所示：

• 第一部分是由一個容器組件 swiper，包含了四個image 組件構(gòu)成；
• 第二部分是由一個容器組件 div，包含了一個 text 組件和四個畫布組件 canvas 繪制的圓形構(gòu)成。

圖2展示區(qū)布局

根據(jù)布局結(jié)構(gòu)的分析，實現(xiàn)頁面基礎(chǔ)布局的代碼示例如下（其中四個 image 組件和 canvas 組件通過 for 指令來循環(huán)創(chuàng)建）：

  

    

      Food
      Choose What You Like
    
  
  

    
      
    
    

      

        {{descriptionFirstParagraph}}
      
      

        
      
    
  
  

    
      {{cartText}}
  

說明

common 目錄用于存放公共資源，swiper 組件里展示的圖片需要放在 common 目錄下。

構(gòu)建頁面樣式

開發(fā)者在 index.css 文件中需要設(shè)定的樣式主要有 flex-direction（主軸方向），padding（內(nèi)邊距）， font-size（字體大?。┑?。在構(gòu)建頁面樣式中，還采用了 css 偽類的寫法，當焦點移動到 canvas 組件上時，背景顏色變成白色，也可以在 js 中通過 focus 和 blur 事件動態(tài)修改 css 樣式來實現(xiàn)同樣的效果。

/* index.css */
.container {
  flex-direction: column;
}

 
.title-section {
  flex-direction: row;
  height: 60px;
  margin-bottom: 5px;
  margin-top: 10px;
}

 
.title {
  align-items: flex-start;
  flex-direction: column;
  padding-left: 60px;
  padding-right: 160px;
}

 
.name {
  font-size: 20px;
}

 
.sub-title {
  font-size: 15px;
  color: #7a787d;
  margin-top: 10px;
}

 
.swiper-style {
  height: 250px;
  width: 350px;
  indicator-color: #4682b4;
  indicator-selected-color: #f0e68c;
  indicator-size: 10px;
  margin-left: 50px;
}

 
.image-mode {
  object-fit: contain;
}

 
.color-column {
  flex-direction: row;
  align-content: center;
  margin-top: 20px;
}

 
.color-item {
  height: 50px;
  width: 50px;
  margin-left: 50px;
  padding-left: 10px;
}

 
.color-item:focus {
  background-color: white;
}

 
.description-first-paragraph {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 30px;
}

 
.description {
  color: #7a787d;
  font-size: 15px;
}

 
.cart {
  justify-content: center;
  margin-top: 20px;
}

 
.cart-text {
  font-size: 20px;
  text-align: center;
  width: 300px;
  height: 50px;
  background-color: #6495ed;
  color: white;
}

 
.cart-text-focus {
  font-size: 20px;
  text-align: center;
  width: 300px;
  height: 50px;
  background-color: #4169e1;
  color: white;
}

 
.add-cart-text {
  font-size: 20px;
  text-align: center;
  width: 300px;
  height: 50px;
  background-color: #ffd700;
  color: white;
}

構(gòu)建頁面邏輯

開發(fā)者在 index.js 文件中構(gòu)建頁面邏輯，主要實現(xiàn)的是兩個邏輯功能：

• 當焦點移動到不同顏色的圓形，swiper 滑動到不同的圖片；
• 當焦點移動到購物車區(qū)時，“Add To Cart”背景顏色從淺藍變成深藍，點擊后文字變化為“Cart + 1”，背景顏色由深藍色變成黃色，添加購物車不可重復操作。

邏輯頁面代碼示例如下：

// index.js
export default {
  data: {
    cartText: 'Add To Cart',
    cartStyle: 'cart-text',
    isCartEmpty: true,
    descriptionFirstParagraph: 'This is the food page including fresh fruit, meat, snack and etc. You can pick whatever you like and add it to your Cart. Your order will arrive within 48 hours. We gurantee that our food is organic and healthy. Feel free to ask our 24h online service to explore more about our platform and products.',
    imageList: ['/common/food_000.JPG', '/common/food_001.JPG', '/common/food_002.JPG', '/common/food_003.JPG'],
    canvasList: [{
      id: 'cycle0',
      index: 0,
      color: '#f0b400',
    }, {
      id: 'cycle1',
      index: 1,
      color: '#e86063',
    }, {
      id: 'cycle2',
      index: 2,
      color: '#597a43',
    }, {
      id: 'cycle3',
      index: 3,
      color: '#e97d4c',
    }],
  },

 
  onShow() {
    this.canvasList.forEach(element => {
      this.drawCycle(element.id, element.color);
    });
  },

 
  swipeToIndex(index) {
    this.$element('swiperImage').swipeTo({index: index});
  },

 
  drawCycle(id, color) {
    var greenCycle = this.$element(id);
    var ctx = greenCycle.getContext("2d");
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(15, 25, 10, 0, 2 * 3.14);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
  },

 
  addCart() {
    if (this.isCartEmpty) {
      this.cartText = 'Cart + 1';
      this.cartStyle = 'add-cart-text';
      this.isCartEmpty = false;
    }
  },

 
  getFocus() {
    if (this.isCartEmpty) {
      this.cartStyle = 'cart-text-focus';
    }
  },

 
  lostFocus() {
    if (this.isCartEmpty) {
      this.cartStyle = 'cart-text';
    }
  },
}

效果示例

實現(xiàn)此實例后，效果示例如下圖所示。

圖3運行效果

網(wǎng)站欄目：創(chuàng)新互聯(lián)鴻蒙OS教程：鴻蒙OS開發(fā)一個JSFA應用
文章URL：http://www.5511xx.com/article/cciidih.html