Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6013
Star 91
Fork 164
H
hello uni-app x
提交 efec8371 编写于 作者: H hdx
浏览文件
操作

scroll-view-props: 重构样式; rpx to px

上级 235afad0
隐藏空白更改
内联 并排
Showing with 217 addition and 226 deletion
pages/component/scroll-view/scroll-view-props.uvue
浏览文件 @ efec8371
<template> <template>
<view style="flex:1;"> <view class="page-scroll-view">
<page-head title="非下拉刷新的scroll-view属性示例"></page-head> <page-head title="非下拉刷新的scroll-view属性示例"></page-head>
<view class="uni-margin-wrap"> <view class="uni-margin-wrap">
<!-- 暂时分成两个方向不同的滚动视图，原因为：scroll-view组件不支持动态改变direction。 --> <!-- 暂时分成两个方向不同的滚动视图，原因为：scroll-view组件不支持动态改变direction。 -->
<scroll-view v-if="scrollX" direction="horizontal" :scroll-top="scrollTop" :scroll-left="scrollLeft" <scroll-view v-if="scrollX" direction="horizontal" :scroll-top="scrollTop" :scroll-left="scrollLeft"
:upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView" :upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView"
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation" style="flex-direction: row;width: 100%;height: 100%;" :enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
:show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper" style="flex-direction: row;width: 100%;height: 100%;" :show-scrollbar="showScrollbar" :bounces="bounces"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewX" id="scrollViewX"> @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend"
<view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items"> ref="scrollViewX" id="scrollViewX">
<text class="uni-text">{{item.label}}</text> <view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items">
</view> <text class="uni-text">{{item.label}}</text>
</scroll-view> </view>
<scroll-view v-else direction="vertical" :scroll-top="scrollTop" :scroll-left="scrollLeft" </scroll-view>
:upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView" <scroll-view v-else direction="vertical" :scroll-top="scrollTop" :scroll-left="scrollLeft"
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation" :upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView"
:show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper" :enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
@touchmove="onTouchMove" :show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper" @touchmove="onTouchMove"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY" style="width: 100%;height: 100%;"> @scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY"
<view class="item" :id="item.id" v-for="(item,_) in items"> style="width: 100%;height: 100%;">
<text class="uni-text">{{item.label}}</text> <view class="item" :id="item.id" v-for="(item,_) in items">
</view> <text class="uni-text">{{item.label}}</text>
</scroll-view> </view>
</view> </scroll-view>
</view>
<scroll-view class="uni-list" showScrollbar="true" scroll-y="true"> <scroll-view class="uni-list" :showScrollbar="true" :scroll-y="true">
<view class="uni-option"> <view class="uni-list-cell uni-list-cell-padding">
<text>是否显示滚动条</text> <text>是否显示滚动条</text>
<switch :checked="showScrollbar" @change="showScrollbar=!showScrollbar"></switch> <switch :checked="showScrollbar" @change="showScrollbar=!showScrollbar"></switch>
</view> </view>
<view class="uni-option"> <view class="uni-list-cell uni-list-cell-padding">
<text>是否有反弹效果</text> <text>是否有反弹效果</text>
<switch :checked="bounces" @change="bounces=!bounces"></switch> <switch :checked="bounces" @change="bounces=!bounces"></switch>
</view> </view>
<view class="uni-option"> <view class="uni-list-cell uni-list-cell-padding">
<text>是否开启滚动时使用动画过渡</text> <text>是否开启滚动时使用动画过渡</text>
<switch :checked="scrollWithAnimation" @change="scrollWithAnimation=!scrollWithAnimation"></switch> <switch :checked="scrollWithAnimation" @change="scrollWithAnimation=!scrollWithAnimation"></switch>
</view> </view>
<view class="uni-option"> <view class="uni-list-cell uni-list-cell-padding">
<text>是否横向滚动</text> <text>是否横向滚动</text>
<switch :checked="scrollX" @change="changeDirectionX"></switch> <switch :checked="scrollX" @change="changeDirectionX"></switch>
</view> </view>
<view class="uni-option"> <view class="uni-list-cell uni-list-cell-padding">
<text>是否竖向滚动</text> <text>是否竖向滚动</text>
<switch :checked="scrollY" @change="changeDirectionY"></switch> <switch :checked="scrollY" @change="changeDirectionY"></switch>
</view> </view>
<view class="uni-common-pb"></view> <view class="uni-slider uni-list-cell-padding">
<view class="uni-slider"> <text>拖动设置scroll-top</text>
<text>拖动设置scroll-top</text> </view>
<slider :max="1000" :min="0" :step="10" :value="scrollTop" :show-value="true" <view class="uni-slider uni-list-cell-padding">
@change="handleChangeScrollTop" style="margin-top: 10rpx;" /> <slider :max="1000" :min="0" :step="10" :value="scrollTop" :show-value="true" @change="handleChangeScrollTop" />
</view> </view>
<view class="uni-common-pb"></view> <view class="uni-slider uni-list-cell-padding">
<view class="uni-slider"> <text>拖动设置scroll-left</text>
<text>拖动设置scroll-left</text> </view>
<slider :max="1000" :min="0" :step="10" :value="scrollLeft" :show-value="true" <view class="uni-slider uni-list-cell-padding">
@change="handleChangeScrollLeft" style="margin-top: 10rpx;" /> <slider :max="1000" :min="0" :step="10" :value="scrollLeft" :show-value="true"
</view> @change="handleChangeScrollLeft" />
</view>
<view class="uni-option"> <view class="uni-list-cell uni-list-cell-padding">
<text>设置触发scrolltoupper的距离</text> <text>设置触发scrolltoupper的距离</text>
<input style="width: 100rpx;border-width: 2rpx;text-align: center;border-style: solid; " :value="upperThreshold" <input class="uni-list-cell-input" type="number" :value="upperThreshold" @input="handleUpperThresholdInput" />
type="number" @input="handleUpperThresholdInput" /> </view>
</view> <view class="uni-list-cell uni-list-cell-padding">
<text>设置触发scrolltolower的距离</text>
<view class="uni-option"> <input class="uni-list-cell-input" type="number" :value="lowerThreshold" @input="handleLowerThresholdInput" />
<text>设置触发scrolltolower的距离</text> </view>
<input style="width: 100rpx;border-width: 2rpx;text-align: center;border-style: solid; " :value="lowerThreshold" <view class="uni-list-cell uni-list-cell-padding">
type="number" @input="handleLowerThresholdInput" /> <button type="primary" class="button" @click="handleScrollIntoView">
</view> 滚动到id为`item3`的子视图
</button>
<view class="uni-common-pb"></view> </view>
<view class="uni-slider"> <view class="uni-list-cell uni-list-cell-padding">
<button type="primary" class="button" @click="handleScrollIntoView"> </view>
滚动到id为`item3`的子视图 </scroll-view>
</button> </view>
</view>
<view class="uni-common-pb"></view>
</scroll-view>
</view>
</template> </template>
<script> <script>
type Item = { type Item = {
id : string, id : string,
label : string, label : string,
} }
export default { export default {
data() { data() {
return { return {
items: [] as Item[], items: [] as Item[],
scrollX: false, scrollX: false,
scrollY: true, scrollY: true,
bounces: false, bounces: false,
scrollTop: 0, scrollTop: 0,
scrollLeft: 0, scrollLeft: 0,
scrollIntoView: "", scrollIntoView: "",
enableBackToTop: false, enableBackToTop: false,
scrollWithAnimation: false, scrollWithAnimation: false,
showScrollbar: true, showScrollbar: true,
upperThreshold: 50, upperThreshold: 50,
lowerThreshold: 50, lowerThreshold: 50,
} }
}, },
onLoad() { onLoad() {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
const item = { const item = {
id: "item" + i, id: "item" + i,
label: "item" + i, label: "item" + i,
} as Item; } as Item;
this.items.push(item); this.items.push(item);
} }
}, },
methods: { methods: {
handleChangeScrollLeft(e : SliderChangeEvent) { handleChangeScrollLeft(e : SliderChangeEvent) {
this.scrollLeft = e.detail.value; this.scrollLeft = e.detail.value;
}, },
handleChangeScrollTop(e : SliderChangeEvent) { handleChangeScrollTop(e : SliderChangeEvent) {
this.scrollTop = e.detail.value; this.scrollTop = e.detail.value;
}, },
changeDirectionX() { changeDirectionX() {
this.scrollX = !this.scrollX; this.scrollX = !this.scrollX;
if(this.scrollX) { if (this.scrollX) {
this.scrollY = false this.scrollY = false
} }
this.scrollTop = 0; this.scrollTop = 0;
this.scrollLeft = 0; this.scrollLeft = 0;
}, },
changeDirectionY() { changeDirectionY() {
this.scrollY = !this.scrollY; this.scrollY = !this.scrollY;
if(this.scrollY) { if (this.scrollY) {
this.scrollX = false this.scrollX = false
} }
this.scrollTop = 0; this.scrollTop = 0;
this.scrollLeft = 0; this.scrollLeft = 0;
}, },
handleScrollIntoView() { handleScrollIntoView() {
if (this.scrollX) { if (this.scrollX) {
this.scrollIntoView = "horizontal_item3"; this.scrollIntoView = "horizontal_item3";
} else { } else {
this.scrollIntoView = "item3"; this.scrollIntoView = "item3";
} }
//重置状态，由于响应式的原因，设置的值与当前值相同，会导致再次设置无效果。 //重置状态，由于响应式的原因，设置的值与当前值相同，会导致再次设置无效果。
setTimeout(() => { setTimeout(() => {
this.scrollIntoView = ""; this.scrollIntoView = "";
}, 0); }, 0);
}, },
handleUpperThresholdInput(e : InputEvent) { handleUpperThresholdInput(e : InputEvent) {
const value = e.detail.value; const value = e.detail.value;
if (value == "") { if (value == "") {
this.upperThreshold = 50; this.upperThreshold = 50;
} else { } else {
this.upperThreshold = parseInt(e.detail.value); this.upperThreshold = parseInt(e.detail.value);
} }
}, },
handleLowerThresholdInput(e : InputEvent) { handleLowerThresholdInput(e : InputEvent) {
const value = e.detail.value; const value = e.detail.value;
if (value == "") { if (value == "") {
this.lowerThreshold = 50; this.lowerThreshold = 50;
} else { } else {
this.lowerThreshold = parseInt(e.detail.value); this.lowerThreshold = parseInt(e.detail.value);
} }
}, },
//事件监听 //事件监听
scrolltoupper() { scrolltoupper() {
console.log("滚动到顶部"); console.log("滚动到顶部");
}, },
scrolltolower() { scrolltolower() {
console.log("滚动到底部"); console.log("滚动到底部");
}, },
scroll(e : ScrollEvent) { scroll(e : ScrollEvent) {
console.log("scroll-top : " + e.detail.scrollTop + " scroll-left : " + e.detail.scrollLeft); console.log("scroll-top : " + e.detail.scrollTop + " scroll-left : " + e.detail.scrollLeft);
}, },
scrollend() { scrollend() {
console.log("滚动停止"); console.log("滚动停止");
}, },
onTouchMove() { onTouchMove() {
console.log("TouchMove"); console.log("TouchMove");
}, },
//自动化测试专用 //自动化测试专用
checkScrollHeight(): Boolean { checkScrollHeight() : Boolean {
var element = this.$refs["scrollViewY"] var element = this.$refs["scrollViewY"]
if(element != null) { if (element != null) {
var scrollHeight = (element as Element).scrollHeight var scrollHeight = (element as Element).scrollHeight
console.log("checkScrollHeight"+scrollHeight) console.log("checkScrollHeight" + scrollHeight)
if(scrollHeight > 1900) { if (scrollHeight > 1900) {
return true return true
} }
} }
return false return false
}, },
//自动化测试专用 //自动化测试专用
checkScrollWidth(): Boolean { checkScrollWidth() : Boolean {
var element = this.$refs["scrollViewX"] var element = this.$refs["scrollViewX"]
if(element != null) { if (element != null) {
var scrollWidth = (element as Element).scrollWidth var scrollWidth = (element as Element).scrollWidth
console.log("checkScrollWidth---"+scrollWidth) console.log("checkScrollWidth---" + scrollWidth)
if(scrollWidth > 1900) { if (scrollWidth > 1900) {
return true return true
} }
} }
return false return false
} }
} }
} }
</script> </script>
<style> <style>
.uni-margin-wrap { .uni-margin-wrap {
height: 400rpx; height: 200px;
margin-left: 50rpx; margin: 0 25px 25px 25px;
margin-right: 50rpx; }
}
.item { .item {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 400rpx; height: 200px;
width: 100%; width: 100%;
background-color: azure; background-color: azure;
border-width: 2rpx; border-width: 1px;
border-style: solid; border-style: solid;
border-color: chocolate; border-color: chocolate;
} }
.uni-text { .uni-text {
color: black; color: black;
font-size: 50px; font-size: 50px;
} }
.uni-list { .uni-slider {
flex: 1; justify-content: center;
margin: 50rpx 50rpx 0rpx 50rpx; }
}
.uni-option { .uni-list-cell-input {
height: 100rpx; width: 50px;
flex-direction: row; border: 1px solid #ccc;
justify-content: space-between; text-align: center;
align-items: center; }
padding: 20rpx;
}
.uni-slider { .button {
padding: 30rpx; flex: 1;
justify-content: center; }
} </style>
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或