目录
view组件
视图容器。相当于是传统网页中的 div ,可以用来存放任何的其他子元素。
属性:
hover-class | 点击效果,是一个样式类 |
hover-stop-propagation | bool值,是不是阻止子事件点击效果向外传递 |
hover-start-time | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | 手指松开后点击态保留时间,单位毫秒 |
scroll-view组价
有时候我们的一些视图在手机指定的宽度和高度不够存放。那么可以放在scroll-view中。
设置横向滚动
- 给 scroll-view 添加 scroll-x="true" 属性。
- 给 scroll-view 添加 white-space:nowrap; 样式。
- 给 scroll-view 中的子元素设置为 display:inline-block; 。
<!--me.wxml-->
<scroll-view class='scroll-x-view' scroll-x>
<view class='scroll-view-item bg_red'></view>
<view class='scroll-view-item bg_blue'></view>
<view class='scroll-view-item bg_green'></view>
<view class='scroll-view-item bg_yellow'></view>
</scroll-view>
/**me.wxss**/
.scroll-x-view{
width: 100%;
height: 100px;
background: gray;
white-space: nowrap;
}
.scroll-x-view .scroll-view-item{
width: 200px;
height: 100px;
}
.bg_red{
background: red;
}
.bg_blue{
background: blue;
}
.bg_green{
background: green;
}
.bg_yellow{
background: yellow;
标签的分类:
- 块级元素:布局元素,包括div,p,h4,section,ul,ol,li等,一个元素占一行
- 行内元素: span等,一行可以多个元素,css宽高属性对他不起作用
- 行内块元素:内容元素,img等,一行可以多个,css对他宽高属性起作用
设置竖向滚动
将上面例子的属性修改为:
- 给 scroll-view 添加 scroll-y="true" 属性。
- 给 scroll-view 设置高度。
一些属性
scroll-top | 设置竖向滚动条位置 |
bindscrolltoupper | 滚动到顶部/左边时触发事件 |
bindscrolltolower | 滚动到底部/右边时触发 |
swiper组件
轮播图。
例子:
<!--me.wxml-->
<swiper class-" swiper" style-"width: {{width}}px;height:{{height}}px" autoplay indecator-dots indecator-active-color='orange' indecator-color='pink'>
<swiper-item>
<image src="../../ images/banner1.png ></image>
</swiper-item>
<swiper-item>
<image src=" ../../images/banner2. png" ></image>
</swiper-item>
<swiper-item>
<image src="../../ images/banner3. png”></image>
</swiper-item>
<swiper-item>
<image src=" ../../images/banner4.png" ></image>
</swiper-item>
</swiper>
属性
autoplay | 自动播放 |
indecator-dots | 指示点 |
indecator-active-color | 当前点颜色 |
indecator-color | 未被选中颜色 |
current | 初始哪张图 |
interval | 自动切换时间间隔,ms |
duration | 滑动动画时长,ms |
circular | 滑动衔接,默认false |
vertical | 滑动方向是否为纵向,默认false |
previous-margin | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 |
next-margin | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值,相当于预览 |
display-multiple-items | 同时显示的滑块数量,用处不大 |
bindchange | current 改变时会触发 change 事件,event.detail = {current, source} |