ionic 横向滚动的菜单

1.1. 横向滚动的菜单

1.1.1. 功能介绍

不运用<ion-scroll>,直接用css样式,做成菜单栏的横向滚动。

最外层div设置display:-webkit-box;overflow-x:scroll

1.1.2. 代码

<div class="bar has-header" style="height: 44px;color: #000000;padding:0">

<div class="menu-box">

<div ng-repeat="x in titleList">

<div class="menu-item" ng-bind="x" ng-click="changeRecord($index)" ng-class="isActive == $index?‘activeBot‘:‘‘">

</div>

</div>

</div>

</div>

.menu-box{

margin:0 10px;

display: -webkit-box;   // flex-direction:row

overflow-x: scroll;

-webkit-overflow-scrolling: touch;  //模拟移动端滚动效果

}

.menu-item{

width: auto;

line-height: 44px;

text-align: center;

padding-left: 5px;

padding-right: 5px;

}

::-webkit-scrollbar {display:none}  //隐藏滚动条

原文地址:https://www.cnblogs.com/Amanda-w/p/11647899.html

时间: 2024-10-08 04:14:13

ionic 横向滚动的菜单的相关文章

ionic 横向滚动 ion-scroll 根据后台数据控制当前默认滑动到的位置

<ion-scroll zooming="true" direction="x" style="width: 100%;" scrollbar-x='false' delegate-handle="gradeScroll"> <div style='width:600px'> <div ng-repeat='item in items'>第{{$index}}步</div> &l

微信小程序-scroll-view横向滚动和上拉加载

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

Android TextView 横向滚动(跑马灯效果)

Android TextView 中当文字比较多时希望它横向滚动显示,下面是一种亲测可行的方法. 效果图: 1.自定义TextView,重写isFocused()方法返回true,让自定义TextView一直处于获取焦点状态. package com.example.shen.marqueedemo; import android.content.Context; import android.util.AttributeSet; import android.widget.TextView;

javascript 横向下拉菜单演示

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css横向下拉菜单演示</title><style type="text/c

李洪强实现横向滚动的View&lt;二&gt;

上一节中我们已经实现了一个带有图片,标题和价格label 的UIView 这节我们用这个view实现一个横向滚动的UIcollectionView 实现的效果如下:  01 - 创建CFTyreScrollViewCell,继承自UICollectionViewCell

jQuery实现文字横向滚动效果

HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; overflow:hidden; height:20px;"> <div id="noticeList" style="position:absolute; top:0; height:20px;"> <span>jQuery文字横

DIV+CSS制作二级横向弹出菜单,略简单

没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯DIV+CSS制作二级横向弹出菜单</title> 6 <style type="text/css"> 7 .menu{ 8 font-family:arial,sa

4个74HC595级联控制16x16点阵横向滚动带仿真(二)

废话 续上篇 <4个74HC595级联控制16x16点阵横向滚动带仿真(一)> 将横向滚动的程序分享给QQ群里后,群内的晚秋兄弟提出了另一种思路——采用行扫描.移位方式做滚动,于是熬夜将其实现了一下.仿真程序还是跟前篇一样,不再赘述. 效果预览 代码 /** ********************************************************** ****** Copyright(C), 2010-2016,吐泡泡的虾 ****** ****************

解决iScroll横向滚动区域无法拉动页面的问题

近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域时,很容易触碰到这种区域,这时用户将觉得页面很卡. Google搜了一下,看来很多人都为这个问题而烦恼.有高人给出了解决方案,在 这里 可以找到. 代码如下: myScroll = new iScroll('scrollpanel', { // other options go here... vS