文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 325
阅读 5
收藏 0

这里写图片描述

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>


本文转载自:http://blog.csdn.net/u014360817/article/details/52658760

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
私信 提问
微信小程序实现纵向滚动块--scroll-view

一、微信小程序scroll-view 设置可滚动视图区域 1.由于手机的宽度比较窄,出现横向滚动的需要很常见 2.scrool-y,设置区域可以纵向滚动 3.scrool-into-view ,设置滚动到指定的id 处,在搜索页...

tianma3798
08/24
0
0
微信小程序授权获取手机号,提示获取失败,该appId没有权限

一、获取手机号按钮报错:提示获取失败,该appId没有权限 注:问题出现原因,当前小程序账号没有进行“微信认证”, 解决方案,点击微信认证详情,认证处理之后可以使用。 点击参考微信开发社...

tianma3798
08/25
0
0
微信小程序实现横向滚动块--scroll-view

一、微信小程序scroll-view 设置可滚动视图区域 1.由于手机的宽度比较窄,出现横向滚动的需要很常见 2.scrool-x ,设置区域可以横向滚动 3.scrool-into-view ,设置滚动到指定的id 处,在搜索...

tianma3798
08/24
0
0
小程序scroll-view 实现大图滚动显示总结

有一张大图宽度较大, 一个屏幕展示不开, 需要自动滚动 scrollview显示 wxml

SuShine
04/19
0
0
mpvue 初体验之改写车标速查小程序

前文 说到我开发了一个简单的小程序叫做 车标速查(代码以及二维码详见 这里),本文简单讲讲如何将这个小程序转为 mpvue 开发(最终 成果 ) mpvue 官网的 文档 真的是非常简单,不,应该说...

韩子迟
08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
10
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部