原文:微信小程序把玩(九)scroll-view组件

scroll-view为滚动视图,分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块

主要属性:

使用演示:

wxml

<!--垂直滚动,这里必须设置高度-->
<scroll-view scroll-y="true" style="height: 200px">
<view style="background: red; width: 100px; height: 100px" ></view>
<view style="background: green; width: 100px; height: 100px"></view>
<view style="background: blue; width: 100px; height: 100px"></view>
<view style="background: yellow; width: 100px; height: 100px"></view>
</scroll-view> <!-- white-space
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
pre: 保持HTML源代码的空格与换行,等同与pre标签
nowrap: 强制文本在一行,除非遇到br换行标签
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
inherit: 继承
-->
<!--水平滚动-->
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
<!-- display: inline-block-->
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>

微信小程序把玩(九)scroll-view组件的更多相关文章

  1. 微信小程序把玩(二十九)video组件

    原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...

  2. 微信小程序把玩(十九)radio组件

    原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radi ...

  3. 微信小程序把玩(八)view组件

    原文:微信小程序把玩(八)view组件 刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-di ...

  4. 微信小程序把玩(二十八)image组件

    原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...

  5. 微信小程序把玩(二十一)switch组件

    原文:微信小程序把玩(二十一)switch组件 switch开关组件使用主要属性: wxml <!--switch类型开关--> <view>switch类型开关</vi ...

  6. 微信小程序把玩(十八)picker组件

    原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...

  7. 微信小程序把玩(十七)input组件

    原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml ...

  8. 微信小程序把玩(十二)text组件

    原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...

  9. 微信小程序把玩(十)swiper组件

    原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScroller ...

随机推荐

  1. C++开发人脸性别识别教程(5)——通过FaceRecognizer类实现性别识别

    在之前的博客中已经攻克了人脸检測的问题,我们计划在这篇博客中介绍人脸识别.性别识别方面的相关实现方法. 事实上性别识别和人脸识别本质上是相似的,由于这里仅仅是一个简单的MFC开发,主要工作并不在算法研 ...

  2. 5.3.3.1 deque其他使用方式

    在本节里提供了一些关于deque其他使用方式. 提供相似UNIX中的命令tail的功能,显示一个文件最后面一段文本: def tail(filename, n=10): '返回文件最后的n行文本' w ...

  3. 卷积神经网络(CNN)的细节问题(滤波器的大小选择)

    0. 滤波器的大小选择 大部分卷积神经网络都会采用逐层递增(1⇒ 3 ⇒ 5 ⇒ 7)的方式. 每经过一次池化层,卷积层过滤器的深度都会乘以 2: 1. 权值共享:减轻过拟合 & 降低计算量 ...

  4. spring quartz使用多线程并发“陷阱”

    定义一个job:ranJob,设置每秒执行一次,设置不允许覆盖并发执行 <bean id="rankJob" class="com.chinacache.www.l ...

  5. Dictionary实现(收藏的)

    源文献:https://www.cnblogs.com/InCerry/p/10325290.html 对于C#中的Dictionary类相信大家都不陌生,这是一个Collection(集合)类型,可 ...

  6. 五笔字根--good

    https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/4b90f603738da977b1b5ce57b251f8198 ...

  7. Apache POI Word基本使用

    Apache POI Word 1.什么是Apache POI? Apache POI是一个流行的API,使用Java程序创建,修改和显示MS-Office文件. 它是由Apache Software ...

  8. template.js小小说明

    教程 template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果. 简介 主 ...

  9. vue 遇到的问题

    1.v-show与v-if 在对数据进行显示的时候尽量选择用v-if,v-if对应的则是由生命周期,而对于v-show没有生命周期的切换,大多数使用在ui层的切换,display:none 2.com ...

  10. Java SpringMVC实现国际化整合案例分析(i18n) 专题

    所谓国际化就是支持多种语言,web应用在不同的浏览环境中可以显示出不同的语言,比如说汉语.英语等.下面我将以具体的实例来举例说明: (1)新建动态Javaweb项目,并导入几个SpringMVC必需的 ...