IONIC如何为Ion-select列表添加图片

最新推荐文章于 2021-06-09 11:07:33 发布

蒿豪郝灬号

最新推荐文章于 2021-06-09 11:07:33 发布

阅读量588

点赞数 1

分类专栏： IONIC 文章标签： ion-select add image

本文链接：https://blog.csdn.net/qq_41868796/article/details/88261697

版权

IONIC 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前景介绍：

上帝说：“要有光”，于是便从此有了光。

产品经理说：“语言列表需要加对应国籍的图片，便于识别”，于是，便有了这篇文章!

效果一：

下面是实现方法：

html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <ion-item>
      <ion-label>语言</ion-label>

      <ion-select (click)="OpenLanguage()" [(ngModel)]="defouleLang">
        <ion-option *ngFor="let lang of language" value="{{lang}}">{{lang}}</ion-option>
      </ion-select>

  </ion-item>

</ion-content>

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  language: any = [];
  defouleLang: string = "";

  constructor(public navCtrl: NavController) {
    this.language = ["Chinese-S", "Chinese-T", "English", "Japanese"];
    this.defouleLang = this.language[0];
  }


  OpenLanguage() {
    setTimeout(() => {

      //根据类样式"div.alert-radio-group button"获取html元素
      let buttonElements = document.querySelectorAll('div.alert-radio-group button');

      //判断获取到的元素是否非null
      if (!buttonElements.length) {
        //为空，则重新获取      
        this.OpenLanguage();

      } else {
        //不为空则循环遍历该获取到的html元素（即遍历AlertController列表的信息所在html元素）
        for (let index = 0; index < buttonElements.length; index++) {
          //根据下标取html元素
          let buttonElement = buttonElements[index];
          //然后根据html元素，取列表中的信息
          let optionLabelElement = buttonElement.querySelector('.alert-radio-label');
          let image = optionLabelElement.innerHTML.trim();
          //拼接图片名称显示图片，注意图片命名，须与绑定字段一致，则为该元素添加Image   
          optionLabelElement.innerHTML += '<img  src="assets/imgs/language/' + image + '.jpg" style="width:20px;height:20px;float:right;margin-right: 15px;"/>';
        }

      }

    }, 100);
  }

}

其余效果：

总结：

1.列表数量不宜太多，页面卡顿、加载慢；

2.图片不宜太大，页面卡顿、加载慢；

3.注意图片的路径问题，Build APK安装到手机上后，可能图片会显示不出来，这是由于网页版和Build APK之后图片的路径会有一定差异。可尝试将 <img src="../../assets/imgs/payterm/'>修改为<img src="assets/imgs/payterm/'>,去掉../../，换成绝对路径；

4.下面链接中的代码，图片是中文命名，最好不要使用中文命名。每一张图片可以以列表每一行信息的ID命名，然后对应ID显示即可；

5.最后一个从底部弹出的列表，有几个问题需要注意下：
a. 获取Dom节点中包含注释，需要处理掉；
b. Cancel 按钮也会有图片，需要将它去掉。

下面是全部代码的下载连接

为ion-select添加图片-HTML5代码类资源-CSDN下载