ionic4.x仿京东 - 7.1.商品详情-头部底部制作ion-segment - ion-footer

最新推荐文章于 2021-04-12 21:58:40 发布
最新推荐文章于 2021-04-12 21:58:40 发布
阅读量189 收藏
点赞数
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ZYYzyy1993/article/details/108754503
版权
ionic 专栏收录该内容
62 篇文章 ¥59.90 ¥99.00
订阅专栏
本文档详细介绍了如何使用Ionic4.x框架构建一个类似京东的商品详情页面，包括顶部ion-segment的制作，数据双向绑定，页面内容根据tab切换显示，以及底部ion-footer的布局设计，涉及到ion-title、ion-segment、ion-badge等组件的使用和样式调整。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、效果图

    

 

二、准备工作

1. 新建商品详情页面

ionic g page pcontent

2. 商品详情页面加返回按钮 【pcontent.page.html】

3. 商品列表页面：点击商品跳转到商品详情页面 【productlist.page.html】

传参成功：

了解本专栏 订阅专栏 解锁全文
ionic4.x仿京东 - 4.2.注册
ZYYzyy1993的博客
09-03 174
一、注册流程 => => tab4 login register-step1 register-step2 register-step3 二、创建注册页面 ionic g page register-step1 ionic g page register-step...
ionic4.x仿京东 - 7.2.商品详情-内容布局
ZYYzyy1993的博客
10-03 192
一、效果图 商品 二、布局：标题 价格 效果： 三、样式： 标题价格 上述结构里有个mb10：表示和底部栏10px距离，在公共样式global.scss里定义 【global.scss】 效果： 四、继续结构布局：属性 五、继续样式：属性 六、结构布局：运费 七、样式：运费 效果： 详情 效果图： 结构布局： 样式： 最终代码： 【pcontent.page...
ionic4 切换卡 ion-segment-button 默认不显示
太阳
05-19 1323
<div class="question"></div> <ion-segment [(ngModel)]="button" > <ion-segment-button value="overdue"> <span clas="iconSize">借阅排行&l...
ionic组件-segment分段式导航
qq_41768447的博客
03-18 741
效果展示： Ts代码： import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-news', templateUrl: './news.page.html', styleUrls: ['./news.page.scss'], }) export class NewsPag...
使用ion-segment控件实现当前选中选项卡圆角样式
u012381782的博客
12-17 483
公司新增tab选项卡样式如下图所示： 我的处理方式通过样式加上代码点击事件控制样式的方式来改变当前选中的元素的boder-radius，从而实现上面这一种效果。 首先我们把最外层ion-segment控件整个背景设置为白色 如下图所示： 其次我们再把ion-segment-button的背景色设置为浅灰色如下图所示： 然后我们在处理这个ion-segment-button里面的div布局 最后我们通过代码来控制当前选中的ion-segment-button按钮两边的弧度让， 举
项目总结关于ionic3中的ion-segment的总结
时清云的博客
05-30 4512
目前做的项目是ionic3和angular4.0的结合，所以用到了很多关于ionic3中封装好的标签，例如具有轮播效果的ion-slides和ion-slide等。那么这次就要总结一下另外一个标签ion-segment的用法了。 ion-segment这个标签以前用的很少，几乎没有用过。它主要是一组按钮，有时称为分段控件，之前都是用button按钮，现在知道了，开始用ion-segment，因为它...
ionic5 中搜索框组件searchbar和分段器组件segment
u010574271的博客
04-12 515
文章目录准备搜索框组件searchbar普通搜索框功能动态搜索框 animated输入类型color颜色搜索框防抖动debounce分段器组件segment定义双向绑定值切换页面切换 准备 首先使用ionic g page searchbar 和ionic g page segment生成两个页面用于测试搜索框组件和分段器组件 然后在tab1页面新建连个按钮用于链接到这两个页面 tab1.page.html: <ion-button [routerLink]="['/searchbar']">
ionic-android-push-notification
05-07
使用Ionic和Node.js在Android上推送通知的示例 您必须按照本教程的说明向注册，生成KEY API和项目编号。 安装 $ cd app $ ionic platforms add android $ cd push-server $ npm install 必要的改变 /App/...
ionic4.x仿京东 - 2.2.分类
ZYYzyy1993的博客
09-01 203
一、左右分栏flex 1.整体布局 左边固定宽度，右边flex:1自适应 2.效果实现 【tab2.page.html】 【tab2.page.scss】 效果： 二、左侧分类 1.定义数据 【tab2.page.ts】 2.渲染数据 【tab2.page.html】 3.效果 三、右侧 1.【tab2.page.ts】 2.【tab2.page.html】 四、内部滚动条（给div加overflow-y: auto） ...
ionic2中ion-segment用法
涂涂
08-17 9421
segment是一组按钮，有时称为分段控件，允许用户与许多控件的紧凑组进行交互。 分段提供与标签相似的功能，选择一个将取消选择所有其他选项。 当您希望让用户在应用程序的不同页面之间来回移动时，应使用选项卡栏而不是分段控件。 您可以使用Angular的ngModel或FormBuilder API。效果看图看代码：&lt;!-- Segment 在头部使用 --&gt; &lt;ion-header...
ionic4--tab/segment(单显不同内容）
萍踪侠影
05-04 915
前言 我们今天制作一个利用同一个页面显示不同的内容，那么我们今天利用官网中的tab和segment制作一下。 方法实战 方法一：标签法–利用tab（比较j简单） 首先我们写html代码：用来显示下面三个不同的标识 <div> <ion-tabs slot="top"> <ion-tab-bar> <i...
ion-segment动态添加后，点击无效问题
chelen_jak的专栏
06-12 321
原文出处：https://blog.csdn.net/bigname22/article/details/79657286 Ionic开发遇到这样一个问题 <ion-segment class="tabs" [(ngModel)]="tabIndex" color="primary" (ionChange)="tabChange($event)"> <ion-s...
Ionic4—UI组件之Segment组件
雷雨天的雷胖子
11-18 748
目录 一、概述 二、详解 三、实例 一、概述 Ionic4中使用ion-segment组件实现tabs切换。 二、详解 简单示例 使用ion-segment-button组件定义ion-segment组件中的按钮。 <ion-content padding> <ion-segment (ionChange)="segmentChanged($e...
ionic3用Segment实现左右滑动菜单
Dan_2017
01-03 8543
1.这里使用Segment实现左右滑动菜单主要是解决一下两个问题： 之前在 Ionic3学习笔记(三)这篇博客里我使用的Swiper实现的左右滑动菜单的页面布局默认居中的问题，在 .slide-zoom { height: 100%; } 里面你可以这是页面的整体布局是left，center，right，但是在页面里面子级布局就继承了这里的父级布局，导致布局困难，
ion-content 滚动到底部会遮住一部分视图的解决办法
TryCatch
12-26 4335
ion-content 滚动到底部会遮住一部分视图的解决办法
ionic4 segment组件+slides实现页面左右滑动
张伟光
03-15 2299
1.1 初始化segment 1.2在对应的ts中 1.3设置默认选择第一个 1.4 segement的click事件触发，改变下面slide值的ts 2.1 初始化slide 页面滑动幻灯片时触发的方法 2.2对应的ts 滑动幻灯片的时候，获取当前幻灯片的值，然后改变segmengmodel的值，即让上面的segment跟着滑动显示。 最后附上实现的效果图: ...
ionic3 ion-segment动态添加数据，点击无效
qq_39252703的博客
08-16 1178
解决方案： import { ViewChild } from '@angular/core'; import {Segment } from 'ionic-angular'; export class FloorsPage {    @ViewChild(Segment) segment: Segment; } 在数据请求之后添加： setTimeout(() =&gt; {  ...
Ionic2 可以左右滑动的Segment
热门推荐
待花开花谢的博客
12-05 1万+
ionic2为我们提供了一个非常好的组件叫segment，一般的使用是没有问题的但是我们如果想要给segment加上一个可以滑动的事件的时候就会遇到一些问题，以下就是个人见解。 在ionic2中使用swipe的时候，没有像1中那样提供左滑还是右滑，而是使用的$event事件。这样就为我们处理左滑还是右滑带来麻烦，但是如果我们使用过HammerJS 的话我们就知道HammerJS 中处理事件是通过e
ionic4学习笔记13-某东项目分类列表
tongle_deng的专栏
06-26 142
1、Tab2页面代码 <ion-content> <div class="cate_content"> <div class="cate_left"> <ion-list lines="full"> <ion-item *ngFor="let item of lCateList"> <ion-label>{{item}}</ion-label>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZYYzyy1993

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值