ionic之切换开关，具体解决方案

最新推荐文章于 2025-05-02 07:40:25 发布
最新推荐文章于 2025-05-02 07:40:25 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： ionic开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Generon/article/details/72637553

1、实例背景

     ionic切换开关toggle，设置样式用的是toggle-calm、toggle-light等


2、实现源码

[html]  view plain  copy
 print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
  6.         <title>ionic之切换开关</title>  
  7.         <link rel="stylesheet" href="../css/ionic.css" />  
  8.         <script type="text/javascript" src="../js/angular/angular.js" ></script>  
  9.         <script type="text/javascript" src="../js/ionic.js"></script>  
  10.         <script type="text/javascript" src="../js/ionic-angular.js" ></script>  
  11.         <script type="text/javascript" src="../js/ionic.bundle.js" ></script>  
  12.     </head>  
  13.     <body>  
  14.         <div class="content has-header">  
  15.             <ul class="list">  
  16.                 <li class="item item-toggle">Java  
  17.                     <label class="toggle toggle-assertive">  
  18.                         <input type="checkbox" checked="">  
  19.                         <div class="track">  
  20.                            <div class="handle"></div>  
  21.                         </div>  
  22.                     </label>  
  23.                 </li>  
  24.                 <li class="item item-toggle">VB  
  25.                     <label class="toggle toggle-balanced">  
  26.                         <input type="checkbox" checked="">  
  27.                         <div class="track">  
  28.                            <div class="handle"></div>  
  29.                         </div>  
  30.                     </label>  
  31.                 </li>  
  32.                 <li class="item item-toggle">C#  
  33.                     <label class="toggle toggle-calm">  
  34.                         <input type="checkbox" checked="">  
  35.                         <div class="track">  
  36.                            <div class="handle"></div>  
  37.                         </div>  
  38.                     </label>  
  39.                 </li>  
  40.                 <li class="item item-toggle">C  
  41.                     <label class="toggle toggle-dark">  
  42.                         <input type="checkbox" checked="">  
  43.                         <div class="track">  
  44.                            <div class="handle"></div>  
  45.                         </div>  
  46.                     </label>  
  47.                 </li>  
  48.                 <li class="item item-toggle">C++  
  49.                     <label class="toggle toggle-energized">  
  50.                         <input type="checkbox" checked="">  
  51.                         <div class="track">  
  52.                            <div class="handle"></div>  
  53.                         </div>  
  54.                     </label>  
  55.                 </li>  
  56.                 <li class="item item-toggle">JavaScript  
  57.                     <label class="toggle toggle-light">  
  58.                         <input type="checkbox" checked="">  
  59.                         <div class="track">  
  60.                            <div class="handle"></div>  
  61.                         </div>  
  62.                     </label>  
  63.                 </li>  
  64.                 <li class="item item-toggle">HTML5  
  65.                     <label class="toggle toggle-positive">  
  66.                         <input type="checkbox" checked="">  
  67.                         <div class="track">  
  68.                            <div class="handle"></div>  
  69.                         </div>  
  70.                     </label>  
  71.                 </li>  
  72.                 <li class="item item-toggle">CSS3  
  73.                     <label class="toggle toggle-royal">  
  74.                         <input type="checkbox" checked="">  
  75.                         <div class="track">  
  76.                            <div class="handle"></div>  
  77.                         </div>  
  78.                     </label>  
  79.                 </li>  
  80.                 <li class="item item-toggle">Flex  
  81.                     <label class="toggle toggle-small">  
  82.                         <input type="checkbox" checked="">  
  83.                         <div class="track">  
  84.                            <div class="handle"></div>  
  85.                         </div>  
  86.                     </label>  
  87.                 </li>  
  88.                 <li class="item item-toggle">Dojo  
  89.                     <label class="toggle toggle-stable">  
  90.                         <input type="checkbox" checked="">  
  91.                         <div class="track">  
  92.                            <div class="handle"></div>  
  93.                         </div>  
  94.                     </label>  
  95.                 </li>  
  96.                 <li class="item item-toggle">AngularJS  
  97.                     <label class="toggle ion-ios-toggle-outline">  
  98.                         <input type="checkbox" checked="">  
  99.                         <div class="track">  
  100.                            <div class="handle"></div>  
  101.                         </div>  
  102.                     </label>  
  103.                 </li>  
  104.                 <li class="item item-toggle">ionic  
  105.                     <label class="toggle ion-toggle-filled">  
  106.                         <input type="checkbox" checked="">  
  107.                         <div class="track">  
  108.                            <div class="handle"></div>  
  109.                         </div>  
  110.                     </label>  
  111.                 </li>  
  112.                 <li class="item item-toggle">ionic  
  113.                     <label class="toggle ion-toggle-filled">  
  114.                         <input type="checkbox" checked="">  
  115.                         <div class="track">  
  116.                            <div class="handle"></div>  
  117.                         </div>  
  118.                     </label>  
  119.                 </li>  
  120.             </ul>  
  121.         </div>  
  122.     </body>  
  123. </html>  

3、实现结果


清华镜像还可以这么用之Anaconda+PyTorch环境配置
Ls1214_97的博客
05-23 5211
歪门邪道使用清华镜像配置Pytorch
Anaconda清华镜像--安装、配置与使用
热门推荐
jialong_chen的博客
11-23 9万+
文章目录1. Anaconda下载安装1.1 下载地址1.2 安装2. 配置清华镜像源3. 测试使用 1. Anaconda下载安装 1.1 下载地址 清华镜像：https://mirrors.tuna.tsinghua.edu.cn/ 选择适合自己系统的最新版本下载。 1.2 安装 双击下载后的exe文件： 此时安装的应用如下： Anaconda Navigator：图形化界面 Anaconda Powershell Prompt：命令行 Anaconda Prompt：命令行
Anaconda保姆安装教程
2202_75971130的博客
10-09 4326
本文以从清华镜像下载为例进行ANACONDA安装演示。
配置pip和conda清华镜像方法
最新发布
hnrxrn的专栏
05-02 1255
为了加速 Python 包的下载，可以为。通过以上步骤，下载速度会显著提升。
Anaconda添加清华镜像源
qq_38473254的博客
10-15 6179
【代码】Anaconda添加清华镜像源。
Anaconda配置清华镜像
自己在学习过程中的总结
09-26 2348
Anaconda镜像配置。现在好多老教程配置的镜像已经不可以用了，所以推荐直接用tuna的官方文档进行配置，链接在这：https://mirror.tuna.tsinghua.edu.cn/help/anaconda/。第一次配镜像的小伙伴，我针对官方文档，对需要做的步骤做了如下演示： 1. Anaconda Prompt窗口下（base环境），执行如下命令，来生成`.condarc` 的文件。tip ：我认为有清华镜像源就够用了，没必要再去配置其他的镜像源，配置的多，反而在查找包的时候慢了。
Anaconda配置清华镜像源
weixin_53658826的博客
06-21 557
Anaconda清华镜像源
【Anaconda】添加清华镜像源
qq_50694225的博客
10-08 2697
Anaconda关于管理源通道的一些方法
Anaconda镜像源配置(教程).md
09-03
Anaconda镜像源配置是提升数据科学、机器学习和计算科学等领域的研究与开发效率的重要步骤。在使用Anaconda进行包管理时，由于地理位置或其他网络因素，从默认的源下载包可能会变得缓慢。通过配置镜像源，可以有效...
Anaconda安装详解、配置清华镜像和常用命令行集锦
weixin_45949781的博客
11-30 1万+
Anaconda是一个开源的Python发行版本，集成了conda包管理工具和大部分Python核心科学包和依赖项，几乎能够满足大部分日常学习需求了。支持windows、linux等系统，可以帮助我们很好的解决各种依赖关系的缺失以及某个python库无法安装等烦恼，因此强烈推荐大家使用。接下来，将详细介绍Anaconda的安装、清华镜像源的配置和一些常用的conda命令行。 Anaconda的安装...
在Anaconda3下使用清华镜像源安装TensorFlow（CPU版）
09-17
在Anaconda3环境下安装TensorFlow（CPU版）是许多数据科学家和机器学习初学者的常见需求，特别是当网络连接不稳定或者速度较慢时，选择使用清华镜像源能显著提高下载速度。以下将详细介绍如何利用清华镜像源在...
anaconda清华源配置
09-14
anaconda的下载源配置文件，一般放在C:\Users\Administrator下，替换原文件即可。
【Python】Anaconda以及Pip配置清华镜像源
2401_84204207的博客
04-14 2万+
最近换了新电脑，在使用Anaconda安装Python包时，系统会自动从默认源下载安装包，但是由于网络访问限制或网络连接速度较慢等原因，会导致安装失败或安装速度较慢。因此，为了提高安装速度和稳定性，一些用户选择使用国内的镜像源，如清华镜像源。配置清华镜像源可以让用户从国内的服务器上下载Python包，这可以加快下载速度，并减少由于网络访问限制导致的下载失败等问题。
Anaconda 配置清华镜像源
抄而不思则废
06-17 4907
conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ conda config --set show_channel_urls yes pip 设置清华镜像源： https://blog.youkuaiyun.com/lemon4869/
anaconda 配置清华源镜像
碧雨若风的博客
02-11 902
anaconda 配置清华源 自己做个备份 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorch/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ con...
anaconda配置镜像及注意事项
qq_38256519的博客
01-16 2855
anaconda配置镜像源
conda操作总结，pip操作总结，python包安装
帆的博客
08-01 546
【代码】conda操作总结。
Anaconda安装及pip镜像配置
2401_86489187的博客
08-08 3561
首先，看anaconda是否自动配置了环境变量(这个命令的意思是重载bash环境配置文件，以此更新环境变量)检查conda是否添加到了环境变量中，输入conda，如果conda命令找到，则不需要添加环境变量；我比较推荐直接使用Miniconda，以下安装也是默认使用Miniconda（实际两者安装步骤是一样的）在最后面添加，这个是根据自己的anaconda3安装路径填写，不要直接复制，具体安装路径在安装中有显示。这里第一行是自动配置环境变量，第二行是注册默认的python版本，点击。
Anaconda配置镜像源 (超详细版)
xieziyu2003的博客
04-04 8171
由于Conda默认的下载源远在海外，因此如果处在特定区域内，使用conda进行python包的安装时速度会非常慢，这个时候就需要从国内镜像源进行下载。本文将先介绍如何对Anaconda配置镜像源，然后再介绍常见的镜像源网址。声明：本教程以实践为主，理论为辅。本教程需要的基础：会安装并简单使用Anaconda。
anaconda安装教程 anaconda清华镜像下载
02-27
### Anaconda 安装教程 #### 一、安装 Anaconda 并配置环境变量 为了确保 Anaconda 正常工作，在安装过程中需要注意勾选添加路径选项，这一步骤对于后续命令行工具的正常使用至关重要[^3]。 ```bash # 如果在安装时未选择添加路径，则可以通过手动设置环境变量来解决 export PATH="/path/to/anaconda/bin:$PATH" ``` #### 二、验证安装是否成功 完成安装后，可通过启动 Anaconda Navigator 或者在命令提示符中运行 `conda --version` 来确认安装情况。如果显示 Conda 的版本号则表示安装无误。 ```bash conda --version ``` ### 使用清华大学镜像加速软件包下载 #### 三、配置 Conda 使用清华大学镜像源 由于官方仓库可能速度较慢，建议修改默认的 Conda 源为清华大学开源软件镜像站提供的国内镜像地址，从而提高依赖项获取效率[^1]。 ```bash # 添加清华镜像作为优先级最高的渠道 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ # 显示完整的 URL 地址以便于调试 conda config --set show_channel_urls yes ``` #### 四、创建并激活 TensorFlow 所需虚拟环境 考虑到不同 Python 版本之间的兼容性差异，推荐专门为 TensorFlow 创建独立的工作空间，并指定合适的 Python 解释器版本[^2]。 ```bash # 基于特定Python版本建立新的Conda环境 conda create -n tensorflow python=3.6 anaconda # 切换至刚创建好的环境中去 conda activate tensorflow ``` #### 五、利用 Pip 和 Conda 结合方式高效部署 TensorFlow 及其他库 除了通过 Conda 管理基础设施外，还可以借助 PyPI 上丰富的第三方扩展资源进一步完善开发平台建设；同样地，这里也提倡采用本地化存储节点以加快网络传输速率[^4]。 ```bash # 运用Pip配合清华简易索引服务器快速加载目标模块 pip install tensorflow-gpu==2.x.y -i https://pypi.tuna.tsinghua.edu.cn/simple ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值