微信小程序 笔记9 view scroll-view swiper组件

目录

view组件

scroll-view组价

设置横向滚动

设置竖向滚动

一些属性

swiper组件

属性

---

view组件

视图容器。相当于是传统网页中的 div ，可以用来存放任何的其他子元素。

官方文档

属性：

hover-class	点击效果，是一个样式类
hover-stop-propagation	bool值，是不是阻止子事件点击效果向外传递
hover-start-time	按住后多久出现点击态，单位毫秒
hover-stay-time	手指松开后点击态保留时间，单位毫秒

scroll-view组价

有时候我们的一些视图在手机指定的宽度和高度不够存放。那么可以放在scroll-view中。

设置横向滚动

1. 给 scroll-view 添加 scroll-x="true" 属性。
2. 给 scroll-view 添加 white-space:nowrap; 样式。
3. 给 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对他宽高属性起作用

设置竖向滚动

将上面例子的属性修改为：

1. 给 scroll-view 添加 scroll-y="true" 属性。
2. 给 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}