关于小程序视图组件

组件 视图容器 view

hover-class , 指定按下去的样式类，不指定hover-class没有点击特效
hover-start-time, 按住后多久出现点击态(默认50ms)
hovar-stay-time, 松开后点击态保留多久(默认400ms)
// logs.wxml

flex-direction: row

1
2
3



flex-direction: column

1
2
3

// logs.wxss
.flex-wrp{
    display: flex;
}
.flex-item{
    flex: 1;
    width: 100rpx;
    height: 100rpx;
}
.bc_green{
    background-color: green;
}
.bc_red{
    background-color: red;
}
.bc_blue{
    background-color: blue;
}
.bc_orange{
    background-color: orange;
}
.bc_yellow{
    background-color: yellow;
}

// 如果需要滚动视图。需要使用 scroll-view

scroll-view： 滚动视图
scroll-x — 允许横向滚动(默认false)
scroll-y — 允许纵向滚动(默认false)
upper-threshold(number) — 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold(number) — 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top(number) — 设置竖向滚动条位置
scroll-left(number) — 设置横向滚动条位置
scroll-into-view(目标元素的id) — 滚动到目标元素
scroll-with-animation(false) — 设置滚动条位置时使用动画过度
enable-back-to-top(false) — ios点击顶部，安卓双击顶部标题返回顶部
bindscrolltoupper(event) — 滚动到左边/顶部会触发 scrolltoupper 事件
bindscrolltolower(event) — 滚动到左边/顶部会触发 scrolltolower 事件
bindscroll(event) — 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
注意：
请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
scroll-into-view 的优先级高于 scroll-top
在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
swiper： 滑块视图容器，swiper中只可放置swiper-item组件，swiper-item只可放置在swiper中

indicator-dots(false) — 是否显示面板指示点
indicator-color(rgba(0,0,0,.3)) — 面板指示点颜色
indicator-active-color(#000000) — 当前选中的指示点颜色
autoplay(false) — 是否自动切换
current(0) — 当前所在页面的index
interval(5000) — 自动切换间隔
duration(500) — 滑动动画时长
circular(false) — 是否采用衔接滑动
bindchange(event) — current 改变时会触发 change 事件，event.detail = {current: current}
// item.wxml

duration

// item.js
Page({
    data: {
        imgUrls: [
            'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        indicatorDots: false,
        autoplay: false,
        interval: 500,
        duration: 100
    },
    changeIndicatorDots: function (e) {
        this.setData({
            indicatorDots: !this.data.indicatorDots
        })
    },
    changeAutoplay: function (e) {
        this.setData({
            autoplay: !this.data.autoplay
        })
    },
    intervalChange: function (e) {
        this.setData({
            interval: e.detail.value
        })
    },
    durationChange: function (e) {
        this.setData({
            duration: e.detail.value
        })
    }
})

movable-area: movable-view 的可移动区域

注意：movable-area 必须设置width和height属性，不设置默认为10px
movable-view: 可移动的视图容器，在页面中可以拖拽滑动
direction(none) — movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia(false) — movable-view 是否带有惯性
out-of-bounds(false) — 超过可移动区域后，movable-view是否还可以移动
x(number) — 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y(number) — 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping(20) — 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction(2) — 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
注意：movable-view必须在组件中，并且必须是直接子节点，否则不能移动。
示例：
// item.wxml

movable-view区域小于movable-area




click me to move to (30px, 30px)

movable-view区域大于movable-area

// item.js
Page({
    data: {
        x: 0,
        y: 0
    },
    tap: function (e) {
        this.setData({
        x: 30,
        y: 30
        });
    }
})