微信小程序（九）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>

相关文章：

hello WeApp                     icon组件
Window                            text组件                                switch组件
tabBar底部导航               progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期                    checkbox组件                      toast组件
模块化详                     form组件详                     loading 组件
数据绑定                           input 组件                             navigator 组件
View组件                          picker组件                            audio 组件
scroll-view组件                 radio组件                        video组件
swiper组件                        slider组件                            Image组件

赞 (0)

相关推荐

  • 微信小程序 倒计时组件实现代码

    微信小程序 倒计时组件实现代码

    功能: 适用于电商应用的限时团购.商品秒杀等 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second

  • 微信小程序（十）swiper组件详细介绍

    微信小程序（十）swiper组件详细介绍

    Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScrollerView去实现,这个swiper封装的相对还是方便的,使用方式也相对那俩容易些. 主要属性: 属性只需要设置就行了 也可以抽到js文件的data中进行数据绑定,监听使用bindchange,在js中做业务处理. wxml <!--是否显示圆点,自动播放, 间隔时间, 监听滚动和点击事件--> <swiper indicator-dot

  • 微信小程序 (十七)input 组件详细介绍

    微信小程序 (十七)input 组件详细介绍

    input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"

  • 微信小程序（十一）icon组件详细介绍

    微信小程序（十一）icon组件详细介绍

    这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon type="success" size="40"/> <!--安全成功标志图标--> <icon type="safe_success" size="40"/> <!--提示信息图标--> <icon type="i

  • 微信小程序 Image组件实例详解

    微信小程序 Image组件实例详解

    image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源,都用src属性去指定. 重点属性: 三种缩放模式 九种剪切方式 wxml <!--3中是缩放模式 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来.也就是说,可以完整地将图片显示出来. aspectFill 保持纵横比缩放图片,只保证图片

  • 微信小程序 loading 组件实例详解

    微信小程序 loading 组件实例详解

    loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <button type="primary" bindtap="listenerButton">显示loading</button> <!--默认隐藏--> <loading hidden="{{hiddenLoading}}">正在加载</loading>

  • 微信小程序媒体组件详解（视频，音乐，图片）

    微信小程序媒体组件详解（视频，音乐，图片）

    今天主要是简单的讲一下小程序当中的媒体组件,媒体组件包括:视频,音乐,图片等. 先来看看效果图: 1.图片Image <!-- scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 widthFix:宽度不变,高度自动变化,保持原图宽高比不变 aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来. 也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取. aspectFit: 保持纵横比缩放图片,使图片的长边能完全显示出来.

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • 微信小程序（十四）button组件详细介绍

    微信小程序（十四）button组件详细介绍

    button按钮用的算是最普遍的组件之一. 主要属性: wxml <!--按钮默认样式,点击事件--> <button type="defaule" bindtap="clickButton">Defalut</button> <!--原始颜色,不可点击状态, 正在加载状态--> <button type="primary" disabled="true" loading=

  • 微信小程序 Button 组件详解及简单实例

    微信小程序 Button 组件详解及简单实例

    微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名 类型 默认值 说明 size String default 有效值default, mini type String default 按钮的样

随机推荐