uniapp横向滚动
scroll-x="true" 出现横向滚动
scroll-with-animation="true" 横向滚动有动画
<scroll-view class="scrool-more" scroll-x="true" scroll-with-animation="true">
<text class="label-name" v-for="(item,index) in listTypecont"
:key="index">{{item.name }}</text>
</scroll-view>
listTypecont:[
{name:"张三"},
{name:"张三"},
{name:"张三"},
{name:"张三"},
{name:"张三"},
{name:"张三"},
{name:"张三"},
{name:"张三"},
{name:"张三"},
{name:"张三"},
]
.scrool-more{
white-space: nowrap; 必须要这个属性,否者不能出现横线滚动
width: 100%;
height: 56rpx;
display: inline-block;
}
.label-name{
width: 140rpx;
height: 40rpx;
color: #fff;
padding: 20rpx;
background: pink;
}
uniapp横向滚动的更多相关文章
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
- 一款兼容IE6并带有多图横向滚动的jquery特效
一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...
- 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView
李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView 11111222
- 李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView
李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView (VTmagic是一个实现左右滚动的控制器的框架,也可以实现此功能) 实现的效果: 01 - 创建四个控制器 02 - 定义需要 ...
- 李洪强实现横向滚动的View<二>
上一节中我们已经实现了一个带有图片,标题和价格label 的UIView 这节我们用这个view实现一个横向滚动的UIcollectionView 实现的效果如下: 01 - 创建CFTyreScr ...
- js实现文字横向滚动
页面布局 <div id="scroll_div" class="fl"> <div id="scroll ...
- Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》
Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...
- 使用elementUI滚动条之横向滚动
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...
- 解决iScroll横向滚动区域无法拉动页面的问题
近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...
- 利用overflow-x实现横向滚动的xiaoguo
在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~ (1)介绍overflow-x: 1)浏览器支持 所有主流浏览器都支持 o ...
随机推荐
- golang之枚举类型iota
枚举类型是一种常用的数据类型,用于表示一组有限的.预定义的.具名的常量值.在枚举类型中,每个常量都是一个枚举值,它们之间的值相等且唯一. 枚举类型通常用于表示一组相关的常量,比如星期.月份.性别等等. ...
- mysql之编译安装
在CentOS7中编译安装MySQL 5.7.29 一.依赖包安装 yum install gcc gcc-c++ ncurses ncurses-devel cmake bison -y 二.下载源 ...
- Codeforces Round 895 (Div. 3)
B. The Corridor or There and Back Again 题解 考虑二分答案 \(check\)时判断是否\(s_i \leq 2*(k - d_i),k\geq d_i\) c ...
- DevEco Studio:状态管理与事件处理
DevEco Studio:状态管理与事件处理 引言 在现代前端开发中,状态管理和事件处理是构建交互式应用的核心.DevEco Studio,作为华为推出的开发环境,支持开发者使用TypeScript ...
- CSS3 transform转换
1.先说说css的坐标系: x轴的正方向就是水平向右的方向 y轴的正方向就是垂直向下的方向 z轴的正方向就是屏幕到用户的方向 2.位移 说明:位移是转换属性中的一个值,包含2d与3d 属性值 说明 t ...
- powershell禁止系统运行脚本
错误信息: set-executionpolicy remotesigned set-executionpolicy : Windows PowerShell 已成功更新你的执行策略,但在更具体的作业 ...
- 渗透测试-前端加密分析之RSA加密登录(密钥来源服务器)
本文是高级前端加解密与验签实战的第6篇文章,本系列文章实验靶场为Yakit里自带的Vulinbox靶场,本文讲述的是绕过RSA加密来爆破登录. 分析 这里的代码跟上文的类似,但是加密的公钥是通过请求服 ...
- SPRING BOOT 项目中使用<SCOPE>PROVIDED</SCOPE>打包成WAR到TOMCAT运行出现的问题总结
大家知道 spring boot 项目是自带tomcat 的,但是我们有时候是需要把项目打包成war 然后放到独立的tomcat中运行的,这个时候我们就需要将它自带的tomcat给排除开,这时候我们就 ...
- PHP API接口数据简单快速的加密解密
php7.0版本以上不支持mcrypt_encryp函数进行加密的代码,加密方式改为openssl_encrypt 用自己私人的服务器来测试吧,99买阿里云 openssl_系列支持php5.3以上版 ...
- EPPlus使用方法---Excel处理我觉得超级好用
目前只是用到导出Excel功能,导出大规模数据量速度也很快,而且比较容易操作(最起码导出是,暂时没有用到处理已存在的excel功能,有人说NPOI也好用,试了一下,最起码导出这个不如EPPlus ...