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横向滚动的更多相关文章

  1. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  2. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

  3. 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView

    李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView 11111222

  4. 李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView

    李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView (VTmagic是一个实现左右滚动的控制器的框架,也可以实现此功能) 实现的效果:  01 - 创建四个控制器 02 - 定义需要 ...

  5. 李洪强实现横向滚动的View<二>

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

  6. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  7. Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》

    Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...

  8. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

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

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  10. 利用overflow-x实现横向滚动的xiaoguo

    在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~ (1)介绍overflow-x: 1)浏览器支持 所有主流浏览器都支持 o ...

随机推荐

  1. delphi Image32 之 快速入门

    官方快速入门,加上了一些注解 [从WORD粘贴后失去了样式] TImage32 类是关键.TImage32 对象包含单个图像,所有图像操作都作用于此对象. uses Img32;  //引用单元 .. ...

  2. 从零开始学机器学习——入门NLP

    首先给大家介绍一个很好用的学习地址:https://cloudstudio.net/columns 今天我们将深入探讨自然语言处理(Natural Language Processing, NLP)这 ...

  3. Nuxt.js 应用中的 webpack:compiled 事件钩子

    title: Nuxt.js 应用中的 webpack:compiled 事件钩子 date: 2024/11/23 updated: 2024/11/23 author: cmdragon exce ...

  4. (Redis基础教程之十二) 如何解决Redis中的故障

    介绍 Redis是一个开源的内存中键值数据存储.它带有几个命令,可以帮助您进行故障排除和调试.由于Redis具有内存中的键值存储的性质,因此其中许多命令都集中在内存管理上,但是还有一些其他命令对于概述 ...

  5. 如何使用,操作Redis数据库

    本博客不再维护,搬家到 http://zthinker.com .个人微信小程序(分布式编程) Redis是一个开源的内存中键值数据存储.Redis是NoSQL数据库,它不使用结构化查询语言,也称为S ...

  6. 基于golang的swagger

    Swagger 相关的工具集会根据 OpenAPI 规范去生成各式各类的与接口相关联的内容,常见的流程是编写注解 =>调用生成库->生成标准描述文件 =>生成/导入到对应的 Swag ...

  7. GZY.EFCore.BulkExtensions 支持达梦数据库的EF Core批量操作库详解

    前言 EFCore.BulkExtensions是一个常用的EF core 批量处理数据的库. 但是支持的数据库相对较少.特别是.NET5.0版本 连MySQL都无法支持 这个库就是改造的最新EFCo ...

  8. openEuler欧拉安装指定版本的nodejs

    1. 安装nodejs dnf -y install nodejs npm config set registry https://registry.npmmirror.com -g npm conf ...

  9. 中电金信技术实践|Redis哨兵原理及安装部署分享

    ​ 导语:本文主要围绕redis Sentinel的基本概念.部署Redis Sentinel模式和其相关的API等内容进行介绍,并讲述哨兵与主从关系的区别,以及哨兵机制是怎么实现高可用的,希望可以与 ...

  10. Excel 真的很强大之 Excel DDE 攻击

    https://pentestlab.blog/2018/01/16/microsoft-office-dde-attacks/ =cmd|'/c calc.exe'!A1 =MSEXCEL|'\.. ...