Skip to content

H
hello uni-app x

黄粱一梦--Y / hello uni-app x
与 Fork 源项目一致

Fork自 DCloud / hello uni-app x

通知 1
Star 0
Fork 0
H
hello uni-app x

体验新版 GitCode，发现更多精彩内容 >>

提交 3378f686 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io
浏览文件
操作

feat: scroll-view示例

上级 953fd199
展开全部 隐藏空白更改
内联 并排
Showing with 1238 addition and 823 deletion
pages.json
浏览文件 @ 3378f686
此差异已折叠。
pages/component/scroll-view/scroll-view-props.uvue 0 → 100644
浏览文件 @ 3378f686
<template>
<!-- #ifdef APP -->
<view style="flex:1;">
<!-- #endif -->
<page-head title="非下拉刷新的scroll-view属性示例"></page-head>
<view class="uni-margin-wrap">
<!-- 暂时分成两个方向不同的滚动视图，原因为：scroll-x或scroll-y属性一经设置不能动态改变。 -->
<scroll-view v-if="scrollX" :scroll-x="true" :scroll-top="scrollTop" :scroll-left="scrollLeft"
:upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView"
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
:show-scrollbar="showScrollbar" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower"
@scroll="scroll" @scrollend="scrollend">
<view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text>
</view>
</scroll-view>
<scroll-view v-else :scroll-x="false" :scroll-top="scrollTop" :scroll-left="scrollLeft"
:upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView"
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
:show-scrollbar="showScrollbar" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower"
@scroll="scroll" @scrollend="scrollend">
<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-option">
<text>是否显示滚动条</text>
<switch :checked="showScrollbar" @change="showScrollbar=!showScrollbar"></switch>
</view>
<view class="uni-option">
<text>是否有反弹效果</text>
<switch :checked="bounces" @change="bounces=!bounces"></switch>
</view>
<view class="uni-option">
<text>是否开启双击标题栏返回顶部</text>
<switch :checked="enableBackToTop" @change="enableBackToTop=!enableBackToTop"></switch>
</view>
<view class="uni-option">
<text>是否开启滚动时使用动画过渡</text>
<switch :checked="scrollWithAnimation" @change="scrollWithAnimation=!scrollWithAnimation"></switch>
</view>
<view class="uni-option">
<text>是否横向滚动</text>
<switch :checked="scrollX" @change="changeDirection"></switch>
</view>
<view class="uni-common-pb"></view>
<view class="uni-slider">
<text>拖动设置scroll-top</text>
<slider :max="1000" :min="0" :step="10" :value="scrollTop" :show-value="true"
@change="handleChangeScrollTop" style="margin-top: 10rpx;" />
</view>
<view class="uni-common-pb"></view>
<view class="uni-slider">
<text>拖动设置scroll-left</text>
<slider :max="1000" :min="0" :step="10" :value="scrollLeft" :show-value="true"
@change="handleChangeScrollLeft" style="margin-top: 10rpx;" />
</view>
<view class="uni-option">
<text>设置触发scrolltoupper的距离</text>
<input style="width: 100rpx;border-width: 2rpx;text-align: center; " :value="upperThreshold"
type="number" @input="handleUpperThresholdInput" />
</view>
<view class="uni-option">
<text>设置触发scrolltolower的距离</text>
<input style="width: 100rpx;border-width: 2rpx;text-align: center; " :value="lowerThreshold"
type="number" @input="handleLowerThresholdInput" />
</view>
<view class="uni-common-pb"></view>
<view class="uni-slider">
<button type="primary" class="button default-button" @click="handleScrollIntoView">
滚动到id为`item3`的子视图
</button>
</view>
<view class="uni-common-pb"></view>
</scroll-view>
</view>
</template>
<script>
import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent'
type Item = {
id : string,
label : string,
}
export default {
data() {
return {
items: [] as Item[],
scrollX: false,
bounces: false,
scrollTop: 0,
scrollLeft: 0,
scrollIntoView: "",
enableBackToTop: false,
scrollWithAnimation: false,
showScrollbar: false,
upperThreshold: 50,
lowerThreshold: 50,
}
},
onLoad() {
for (let i = 0; i < 10; i++) {
const item = {
id: "item" + i,
label: "item" + i,
} as Item;
this.items.push(item);
}
},
methods: {
handleChangeScrollLeft(e : SliderChangeEvent) {
this.scrollLeft = e.detail.value;
},
handleChangeScrollTop(e : SliderChangeEvent) {
this.scrollTop = e.detail.value;
},
changeDirection() {
this.scrollX = !this.scrollX;
this.scrollTop = 0;
this.scrollLeft = 0;
},
handleScrollIntoView() {
if (this.scrollX) {
this.scrollIntoView = "horizontal_item3";
} else {
this.scrollIntoView = "item3";
}
//重置状态，由于响应式的原因，设置的值与当前值相同，会导致再次设置无效果。
setTimeout(() => {
this.scrollIntoView = "";
}, 0);
},
handleUpperThresholdInput(e : InputEvent) {
const value = e.detail.value;
if (value == "") {
this.upperThreshold = 50;
} else {
this.upperThreshold = parseInt(e.detail.value);
}
},
handleLowerThresholdInput(e : InputEvent) {
const value = e.detail.value;
if (value == "") {
this.lowerThreshold = 50;
} else {
this.lowerThreshold = parseInt(e.detail.value);
}
},
//事件监听
scrolltoupper() {
console.log("滚动到顶部");
},
scrolltolower() {
console.log("滚动到底部");
},
scroll(e : ScrollEvent) {
console.log("scroll-top : " + e.detail.scrollTop + " scroll-left : " + e.detail.scrollLeft);
},
scrollend() {
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;
}
.uni-slider {
height: 100rpx;
padding: 30rpx;
justify-content: center;
}
</style>
\ No newline at end of file
pages/component/scroll-view/scroll-view-refresher-props.uvue 0 → 100644
浏览文件 @ 3378f686
<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
pages/component/scroll-view/scroll-view.uvue
浏览文件 @ 3378f686
......@@ -67,9 +67,21 @@
>
</scroll-view>
</view>
<view class="uni-common-pb"></view>
<button
type="primary"
class="button default-button"
@click="moreProps"
>
非下拉刷新的scroll-view属性示例
</button>
<view class="uni-common-pb"></view>
<button type="primary" class="button default-button" @click="jumpToRefresher">
下拉刷新的scroll-view属性示例
</button>
<view class="uni-common-pb"></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
......@@ -110,7 +122,17 @@ export default {
uni.navigateTo({
url: '/pages/component/scroll-view/scroll-view-refresher',
})
},
},
moreProps(){
uni.navigateTo({
url: '/pages/component/scroll-view/scroll-view-props',
})
},
jumpToRefresher() {
uni.navigateTo({
url: '/pages/component/scroll-view/scroll-view-refresher-props',
})
},
},
}
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或