2020-12-07 11:22:54 +08:00
|
|
|
|
2020-12-07 14:15:34 +08:00
|
|
|
<import src="../../common/head.wxml" />
|
|
|
|
|
<import src="../../common/foot.wxml" />
|
2020-12-07 11:22:54 +08:00
|
|
|
|
|
|
|
|
<view class="container">
|
|
|
|
|
<template is="head" data="{{title: 'scroll-view'}}"/>
|
|
|
|
|
|
|
|
|
|
<view class="page-body">
|
|
|
|
|
<view class="page-section">
|
|
|
|
|
<view class="page-section-title">
|
|
|
|
|
<text>Vertical Scroll\n纵向滚动</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="page-section-spacing">
|
|
|
|
|
<scroll-view scroll-y="true" style="height: 150px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
|
|
|
|
|
<view id="demo1" class="scroll-view-item demo-text-1"></view>
|
|
|
|
|
<view id="demo2" class="scroll-view-item demo-text-2"></view>
|
|
|
|
|
<view id="demo3" class="scroll-view-item demo-text-3"></view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="page-section">
|
|
|
|
|
<view class="page-section-title">
|
|
|
|
|
<text>Horizontal Scroll\n横向滚动</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="page-section-spacing">
|
|
|
|
|
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
|
|
|
|
|
<view id="demo1" class="scroll-view-item_H demo-text-1"></view>
|
|
|
|
|
<view id="demo2" class="scroll-view-item_H demo-text-2"></view>
|
|
|
|
|
<view id="demo3" class="scroll-view-item_H demo-text-3"></view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="page-section">
|
|
|
|
|
<view class="page-section-title">
|
2020-12-07 11:22:54 +08:00
|
|
|
<text>下拉刷新：</text>
|
2020-12-07 11:22:54 +08:00
|
|
|
</view>
|
|
|
|
|
<view class="page-section-spacing">
|
|
|
|
|
<scroll-view
|
|
|
|
|
scroll-y style="width: 100%; height: 400px;"
|
|
|
|
|
refresher-enabled="{{true}}"
|
|
|
|
|
refresher-threshold="{{100}}"
|
|
|
|
|
refresher-default-style="white"
|
|
|
|
|
refresher-background="lightgreen"
|
|
|
|
|
refresher-triggered="{{triggered}}"
|
|
|
|
|
bindrefresherpulling="onPulling"
|
|
|
|
|
bindrefresherrefresh="onRefresh"
|
|
|
|
|
bindrefresherrestore="onRestore"
|
|
|
|
|
bindrefresherabort="onAbort"
|
|
|
|
|
>
|
|
|
|
|
<view id="demo1" class="scroll-view-item_H demo-text-1"></view>
|
|
|
|
|
<view id="demo2" class="scroll-view-item_H demo-text-2"></view>
|
|
|
|
|
<view id="demo3" class="scroll-view-item_H demo-text-3"></view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<template is="foot" />
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<wxs module="refresh">
|
|
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
|
onPulling: function(evt, instance) {
|
|
|
|
|
var p = Math.min(evt.detail.dy / 80, 1)
|
|
|
|
|
console.log(p)
|
|
|
|
|
var view = instance.selectComponent('.refresh-container')
|
|
|
|
|
view.setStyle({
|
|
|
|
|
opacity: p,
|
|
|
|
|
transform: "scale(" + p + ")"
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</wxs>
|
