Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 bf086080 编写于 作者: shutao-dc's avatar shutao-dc
浏览文件
操作

Update scroll-view-refresher-props.uvue

上级 b594a3c6
隐藏空白更改
内联 并排
Showing with 172 addition and 167 deletion
pages/component/scroll-view/scroll-view-refresher-props.uvue
浏览文件 @ bf086080
<template>
<!-- #ifdef APP -->
<view style="flex:1;">
<!-- #endif -->
<page-head title="下拉刷新的scroll-view属性示例"></page-head>
<view class="uni-margin-wrap">
<scroll-view :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
@refresherabort="refresherabort">
<view class="item" :id="item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text>
</view>
</scroll-view>
</view>
<scroll-view class="uni-list" showScrollbar="true">
<view class="uni-common-pb"></view>
<text style="font-size: 12;text-align: center;color: red; ">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
<view class="uni-common-pb"></view>
<view class="uni-option">
<text>是否开启下拉刷新</text>
<switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
</view>
<view class="uni-option">
<text>设置下拉刷新状态</text>
<switch :disabled="!refresherEnabled" :checked="refresherTriggered"
@change="refresherTriggered=!refresherTriggered"></switch>
</view>
<view class="uni-option">
<text>设置下拉刷新阈值</text>
<input style="width: 100rpx;border-width: 2rpx;text-align: center; " :disabled="!refresherEnabled"
:value="refresherThreshold" type="number" @input="handleRefresherThresholdInput" />
</view>
<view class="uni-option">
<text>设置下拉刷新区域背景颜色</text>
<input style="width: 200rpx;border-width: 2rpx;text-align: center; " :disabled="!refresherEnabled"
:value="refresherBackground" @input="handleRefresherBackground" />
</view>
<view style="height: 200rpx;padding: 20rpx; ">
<text>设置下拉刷新默认样式</text>
<view class="uni-common-pb"></view>
<view style="flex-direction: row;">
<button style="padding: 5rpx; margin-right: 10rpx;" type="primary" size="mini"
@click="refresherDefaultStyle = `none`">none</button>
<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
@click="refresherDefaultStyle = `black`">black</button>
<button style="padding: 5rpx;" type="primary" size="mini"
@click="refresherDefaultStyle = `white`">white</button>
</view>
</view>
<!-- //todo 还有自定义下拉刷新样式的例子 -->
<view class="uni-common-pb"></view>
</scroll-view>
</view>
</template>
<script>
type Item = {
id : string,
label : string,
}
export default {
data() {
return {
items: [] as Item[],
refresherEnabled: false,
refresherTriggered: false,
refresherThreshold: 45,
refresherDefaultStyle: "white",
refresherBackground: "transparent",
}
},
onLoad() {
for (let i = 0; i < 10; i++) {
const item = {
id: "item" + i,
label: "item" + i,
} as Item;
this.items.push(item);
}
},
methods: {
handleTrunOnRefresher() {
this.refresherTriggered = false;
//不能同时关闭下拉状态和关闭下拉刷新。
setTimeout(() => {
this.refresherEnabled = !this.refresherEnabled;
}, 0)
},
handleRefresherThresholdInput(e : InputEvent) {
const value = e.detail.value;
if (value == "") {
this.refresherThreshold = 45;
} else {
this.refresherThreshold = parseInt(e.detail.value);
}
},
handleRefresherBackground(e : InputEvent) {
const value = e.detail.value;
this.refresherBackground = value;
},
//响应事件
refresherpulling() {
console.log("下拉刷新控件被下拉");
},
refresherrefresh() {
console.log("下拉刷新被触发");
},
refresherrestore() {
console.log("下拉刷新被复位");
},
refresherabort() {
console.log("下拉刷新被中止");
}
}
}
</script>
<style>
.uni-margin-wrap {
height: 400rpx;
margin-left: 50rpx;
margin-right: 50rpx;
}
.item {
justify-content: center;
align-items: center;
height: 400rpx;
width: 100%;
background-color: azure;
border-width: 2rpx;
border-color: chocolate;
}
.uni-text {
color: black;
font-size: 50px;
}
.uni-list {
flex: 1;
margin: 50rpx 50rpx 0rpx 50rpx;
}
.uni-option {
height: 100rpx;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20rpx;
}
.picker-view {
width: 100%;
height: 320px;
margin-top: 10px;
}
</style>
\ No newline at end of file
<template>
<!-- #ifdef APP -->
<view style="flex:1;">
<!-- #endif -->
<page-head title="下拉刷新的scroll-view属性示例"></page-head>
<view class="uni-margin-wrap">
<scroll-view :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
@refresherabort="refresherabort">
<view class="item" :id="item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text>
</view>
</scroll-view>
</view>
<scroll-view class="uni-list" showScrollbar="true">
<view class="uni-common-pb"></view>
<text style="font-size: 12;text-align: center;color: red; ">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
<view class="uni-common-pb"></view>
<view class="uni-option">
<text>是否开启下拉刷新</text>
<switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
</view>
<view class="uni-option">
<text>设置下拉刷新状态</text>
<switch :disabled="!refresherEnabled" :checked="refresherTriggered"
@change="refresherTriggered=!refresherTriggered"></switch>
</view>
<view class="uni-option">
<text>设置下拉刷新阈值</text>
<input style="width: 100rpx;border-width: 2rpx;text-align: center; " :disabled="!refresherEnabled"
:value="refresherThreshold" type="number" @input="handleRefresherThresholdInput" />
</view>
<view class="uni-option">
<text>设置下拉刷新区域背景颜色</text>
<input style="width: 200rpx;border-width: 2rpx;text-align: center; " :disabled="!refresherEnabled"
:value="refresherBackground" @input="handleRefresherBackground" />
</view>
<view style="height: 200rpx;padding: 20rpx; ">
<text>设置下拉刷新默认样式</text>
<view class="uni-common-pb"></view>
<view style="flex-direction: row;">
<button style="padding: 5rpx; margin-right: 10rpx;" type="primary" size="mini"
@click="refresherDefaultStyle = `none`">none</button>
<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
@click="refresherDefaultStyle = `black`">black</button>
<button style="padding: 5rpx;" type="primary" size="mini"
@click="refresherDefaultStyle = `white`">white</button>
</view>
</view>
<!-- //todo 还有自定义下拉刷新样式的例子 -->
<view class="uni-common-pb"></view>
</scroll-view>
</view>
</template>
<script>
type Item = {
id : string,
label : string,
}
export default {
data() {
return {
items: [] as Item[],
refresherEnabled: false,
refresherTriggered: false,
refresherThreshold: 45,
refresherDefaultStyle: "white",
refresherBackground: "transparent",
}
},
onLoad() {
for (let i = 0; i < 10; i++) {
const item = {
id: "item" + i,
label: "item" + i,
} as Item;
this.items.push(item);
}
},
methods: {
handleTrunOnRefresher() {
this.refresherTriggered = false;
//不能同时关闭下拉状态和关闭下拉刷新。
setTimeout(() => {
this.refresherEnabled = !this.refresherEnabled;
}, 0)
},
handleRefresherThresholdInput(e : InputEvent) {
const value = e.detail.value;
if (value == "") {
this.refresherThreshold = 45;
} else {
this.refresherThreshold = parseInt(e.detail.value);
}
},
handleRefresherBackground(e : InputEvent) {
const value = e.detail.value;
this.refresherBackground = value;
},
//响应事件
refresherpulling() {
console.log("下拉刷新控件被下拉");
},
refresherrefresh() {
console.log("下拉刷新被触发");
this.refresherTriggered = true;
//不能同时关闭下拉状态和关闭下拉刷新。
setTimeout(() => {
this.refresherTriggered = false;
}, 1500)
},
refresherrestore() {
console.log("下拉刷新被复位");
},
refresherabort() {
console.log("下拉刷新被中止");
}
}
}
</script>
<style>
.uni-margin-wrap {
height: 400rpx;
margin-left: 50rpx;
margin-right: 50rpx;
}
.item {
justify-content: center;
align-items: center;
height: 400rpx;
width: 100%;
background-color: azure;
border-width: 2rpx;
border-color: chocolate;
}
.uni-text {
color: black;
font-size: 50px;
}
.uni-list {
flex: 1;
margin: 50rpx 50rpx 0rpx 50rpx;
}
.uni-option {
height: 100rpx;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20rpx;
}
.picker-view {
width: 100%;
height: 320px;
margin-top: 10px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或