ionic v1 添加点击展开/收缩功能

最新推荐文章于 2020-07-28 17:05:20 发布

zfireear

最新推荐文章于 2020-07-28 17:05:20 发布

阅读量3.9k

点赞数

分类专栏： ionic 文章标签： ionic angularjs

本文链接：https://blog.csdn.net/zfireear/article/details/71482338

版权

类似QQ的收缩列表，利用ionic1来实现其实很简单假设我们要在通过点击一个图标来作为触发的

点击这里展开/收缩

我们给这个图标添加一个点击事件，如:通过利用ng-show来控制

摘要由CSDN通过智能技术生成

类似QQ的收缩列表，利用ionic1来实现其实很简单
假设我们要在通过点击一个图标来作为触发的

<div ng-control="osController">点击这里展开/收缩<i src="xxx.png" alt="" ></div>

我们给这个图标添加一个点击事件，如:

<i src="xxx.png" alt=""

最低0.47元/天解锁文章

确定要放弃本次机会？
福利倒计时
: :

立减 ¥
普通VIP年卡可用
立即使用

zfireear

关注关注

0
点赞

踩

0

收藏

觉得还不错? 一键收藏

2
评论

ionic v1 添加点击展开/收缩功能

类似QQ的收缩列表，利用ionic1来实现其实很简单假设我们要在通过点击一个图标来作为触发的<div ng-control="osController">点击这里展开/收缩<i src="xxx.png" alt="" ></div>我们给这个图标添加一个点击事件，如:<i src="xxx.png" alt="" ng-click="openOrShrink()">通过利用ng-show来控制
复制链接

扫一扫

专栏目录

angualr+ionic实现展开收起

renluoluo_6464的博客

02-27 184

一、展开收起效果如下：二、相关代码如下： html ts

ionic3 模拟下拉展开/收缩

weixin_33909059的博客

04-12 350

<ion-header> <ion-navbar> <ion-title>user</ion-title> </ion-navbar></ion-header><ion-content> <ion-item> 用户信息<ion-icon name="ios-arrow-dow...

2 条评论您还未登录，请先登录后发表或查看评论

ionic2 [hidden] (ng-show)

weixin_34247299的博客

04-26 463

2019独角兽企业重金招聘Python工程师标准>>> ...

ionic3 模拟下拉展开/收缩（实用、赞）

chelen_jak的专栏

11-04 393

原文出处：https://www.cnblogs.com/a-long/p/6700034.html ionic3 模拟下拉展开/收缩 <ion-header> <ion-navbar> <ion-title>user</ion-title> </ion-navbar> </ion-heade...

ionic1使用ImagePicker插件并且显示中文（汉化）

weixin_34370347的博客

02-09 204

在使用ionic开发时，打开相册应该是使用比较频繁的插件之一。下面讲讲我在项目中使用（这部分官方比较详细，就简单描述）以及解决插件显示英文问题 1、imagepicker安装cordova plugin add cordova-plugin-image-picker 2、在ionic1开发中的使用2.1在js文件中 angular.mod...

Angular+ionic实现折叠展开效果的示例代码

10-15

在本文中，我们将深入探讨如何使用Angular和Ionic框架来实现折叠/展开的效果，这对于构建动态且交互性强的移动应用至关重要。这种效果通常用于显示和隐藏详细信息，以提高用户体验和界面的整洁性。首先，我们来看...

最新Ionic5/Angular8开发的应用源代码

04-23

Ionic5提供了丰富的UI组件和工具，简化了移动应用的开发流程，使得开发者能够快速构建美观且功能丰富的应用程序。 Angular8是Google维护的一个前端框架，用于构建单页应用。它提供了依赖注入、数据绑定、指令、服务...

ionic实现底部分享功能

08-30

在本文中，我们将深入探讨如何在Ionic框架中实现底部分享功能。Ionic是一个强大的移动应用...通过以上步骤，你可以为你的Ionic应用添加一个完整的底部分享功能，使得用户能够轻松地将内容分享到他们喜欢的社交网络。

简单实现IONIC购物车功能

08-31

主要为大家详细介绍了IONIC简易购物车的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用JS轻松实现ionic调用键盘搜索功能(超实用)

10-21

主要介绍了使用JS轻松实现ionic调用键盘搜索功能(超实用)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

ionic如何创建一个组件(photoSwipe)

weixin_42991716的博客

03-04 247

ionic 组件首先创建一个module ionic g module module/shared 主要用于管理所有的组件, index.ts导出这个module 创建一个总组件moduleionic g module shared/components,在这个module里导出和声明所有的组件； index.ts里导出这个module 创建组件ionic g module shared/co...

IONIC折叠功能

Kelly成长之路

07-08 2505

这两天小编在实现一个页面分等级，每个等级下面有数据，单击可以将每个等级下的数据折叠展开，代码实现如下：一、首先获取数据ts文件内容：// ts文件中 // 定义变量用来存放数据，并从后台获取数据 public levels:any; public protectdatas:any; 接收数据类型格式 : levels[ { name : 1级 , protectdatas : ...

angularjs实现任意点击一个标签，指定的标签展开，其他的标签闭合

sunjiajia726的博客

02-07 2592

html ng-app="myApp"> head> script src="angular.js">script> head> body> div ng-controller="myControl"> table class="table"> tr ng-repeat="info in infoList"> td>

Angular+ionic实现折叠展开效果

weixin_44794123的博客

07-28 834

1，html中 <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isShow=!isShow">

ionic3点击事件反应慢

Cyan的博客

06-05 1928

问题：发现在给非点击元素添加点击事件时，事件触发会慢一点解决问题：给要添加点击事件的非点击元素，加上 tappable属性就可以了: <div tappable (click)="onClick()">点击</div> 但还是建议不要在非点击元素添加点击事件，因为在 a, button 上添加点击事件时可以及时响应的。...

ionic4之列表栏的布局设置

我能在河边钓一整天的鱼

05-19 1341

页面效果设置一：标题栏居中显示解决关键：如图，单独让文字居中简单，可是这一行是由图标+文字构成的，如果只是设置text-align:center，没卵用。这时就需要分别设置图标宽度和文字宽度的百分比了。代码如下，实现居中效果 <ion-header> <ion-toolbar> <ion-title...

ionic2点击事件反应慢

chenkaixin123的博客

11-08 1477

点击元素例如 a标签 button 是可以及时响应的，要想提高其他元素的点击的反应速度，加tappable属性即可 div tappable (click)="fast()">反应快点div>

ionic button 去除点击阴影

最新发布

05-18

要去除 Ionic 按钮的点击阴影，可以在全局的 CSS 文件中添加以下样式： ```css ion-button { --box-shadow: none; } ``` 这将覆盖 Ionic 默认按钮的阴影效果。如果你只想去除某个特定按钮的阴影，可以为该按钮...

“相关推荐”对你有帮助么？

非常没帮助

没帮助

一般

有帮助

非常有帮助

提交