view
视图容器。
示例:
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
列式排放:flex-direction:row;
行式排放:flex-direction:column;
scroll-view
可滚动视图区域。
属性名 | 类型 | 默认值 | 说明 |
scroll-x | Boolean | false | 允许横向滚动 |
scroll-y | Boolean | false | 允许纵向滚动 |
upper-threshold | Number | 50 | 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 |
lower-threshold | Number | 50 | 距底部/右边多远时(单位px),触发 scrolltolower 事件 |
scroll-top | Number | 设置竖向滚动条位置 | |
scroll-left | Number | 设置横向滚动条位置 | |
scroll-into-view | String | 值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部 | |
bindscrolltoupper | EventHandle | 滚动到顶部/左边,会触发 scrolltoupper 事件 | |
bindscrolltolower | EventHandle | 滚动到底部/右边,会触发 scrolltolower 事件 | |
bindscroll | EventHandle | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
使用竖向滚动时,需要给
<scroll-view/>
一个固定高度,通过 WXSS 设置 height。
示例:
index.wxml
<view class="section">
<view class="section__title">vertical scroll</view>
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to scroll into view </button>
<button size="mini" bindtap="tapMove">click me to scroll</button>
</view>
</view>
<view class="section section_gap">
<view class="section__title">horizontal scroll</view>
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red" class="scroll-view-item_H bc_red"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
</view>
index.js
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
toView: 'red',
scrollTop: 100
},
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
},
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: "green"
})
break
}
}
// this.setData({
// toView: "blue"
// })
},
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
index.wxss
.section {
margin-bottom: 40px
}
.section_title {
margin-bottom: 8px;
padding-left: 15px;
padding-right: 15px
}
.scroll-view-item {
height: 200px;
}
.btn-area {
width: 100%;
height: 40px;
}
.section_gap {
padding: 0 15px
}
.scection_gap .section_title {
padding-left: 0;
padding-right: 0
}
.scroll-view_H {
white-space: nowrap
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: 200px
}
.bc_red {
background: red;
}
.bc_green {
background: green;
}
.bc_yellow {
background: yellow;
}
.bc_blue {
background: blue;
}
微信小程序视图容器:swiper
滑动面板
属性名 | 类型 | 默认值 | 说明 |
indicator-dots | Boolean | false | 是否显示面板指示点 |
autoplay | Boolean | false | 是否自动切换 |
current | Number | 0 | 当前所在页面的index |
interval | Number | 5000 | 自动切换时间间隔 |
duration | Number | 1000 | 滑动动画时长 |
bindchange | EventHandle | current改变时会触发change事件,event.detail={current:current} |
注意
:其中只可放置swiper-item组件,其他节点会被自动删除
<!--是否显示圆点,自动播放, 间隔时间, 监听滚动和点击事件-->
<swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >
<!--swiper-item只能包含一个节点再多会自动删除-->
<swiper-item>
<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" width="355" height="150"/>
</swiper-item>
<swiper-item>
<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" width="355" height="150"/>
</swiper-item>
<swiper-item>
<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" width="355" height="150"/>
</swiper-item>
</swiper>