Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6002
Star 91
Fork 163
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>
<view style="flex:1;">
<view class="page-scroll-view">
<page-head title="非下拉刷新的scroll-view属性示例"></page-head>
<view class="uni-margin-wrap">
<!-- 暂时分成两个方向不同的滚动视图，原因为：scroll-view组件不支持动态改变direction。 -->
<scroll-view v-if="scrollX" direction="horizontal" :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" style="flex-direction: row;width: 100%;height: 100%;"
:show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewX" id="scrollViewX">
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
style="flex-direction: row;width: 100%;height: 100%;" :show-scrollbar="showScrollbar" :bounces="bounces"
@scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend"
ref="scrollViewX" id="scrollViewX">
<view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text>
</view>
......@@ -15,70 +16,65 @@
<scroll-view v-else direction="vertical" :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" :bounces="bounces" @scrolltoupper="scrolltoupper"
@touchmove="onTouchMove"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY" style="width: 100%;height: 100%;">
:show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper" @touchmove="onTouchMove"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY"
style="width: 100%;height: 100%;">
<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" scroll-y="true">
<view class="uni-option">
<scroll-view class="uni-list" :showScrollbar="true" :scroll-y="true">
<view class="uni-list-cell uni-list-cell-padding">
<text>是否显示滚动条</text>
<switch :checked="showScrollbar" @change="showScrollbar=!showScrollbar"></switch>
</view>
<view class="uni-option">
<view class="uni-list-cell uni-list-cell-padding">
<text>是否有反弹效果</text>
<switch :checked="bounces" @change="bounces=!bounces"></switch>
</view>
<view class="uni-option">
<view class="uni-list-cell uni-list-cell-padding">
<text>是否开启滚动时使用动画过渡</text>
<switch :checked="scrollWithAnimation" @change="scrollWithAnimation=!scrollWithAnimation"></switch>
</view>
<view class="uni-option">
<view class="uni-list-cell uni-list-cell-padding">
<text>是否横向滚动</text>
<switch :checked="scrollX" @change="changeDirectionX"></switch>
</view>
<view class="uni-option">
<view class="uni-list-cell uni-list-cell-padding">
<text>是否竖向滚动</text>
<switch :checked="scrollY" @change="changeDirectionY"></switch>
</view>
<view class="uni-common-pb"></view>
<view class="uni-slider">
<view class="uni-slider uni-list-cell-padding">
<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">
<view class="uni-slider uni-list-cell-padding">
<slider :max="1000" :min="0" :step="10" :value="scrollTop" :show-value="true" @change="handleChangeScrollTop" />
</view>
<view class="uni-slider uni-list-cell-padding">
<text>拖动设置scroll-left</text>
</view>
<view class="uni-slider uni-list-cell-padding">
<slider :max="1000" :min="0" :step="10" :value="scrollLeft" :show-value="true"
@change="handleChangeScrollLeft" style="margin-top: 10rpx;" />
@change="handleChangeScrollLeft" />
</view>
<view class="uni-option">
<view class="uni-list-cell uni-list-cell-padding">
<text>设置触发scrolltoupper的距离</text>
<input style="width: 100rpx;border-width: 2rpx;text-align: center;border-style: solid; " :value="upperThreshold"
type="number" @input="handleUpperThresholdInput" />
<input class="uni-list-cell-input" type="number" :value="upperThreshold" @input="handleUpperThresholdInput" />
</view>
<view class="uni-option">
<view class="uni-list-cell uni-list-cell-padding">
<text>设置触发scrolltolower的距离</text>
<input style="width: 100rpx;border-width: 2rpx;text-align: center;border-style: solid; " :value="lowerThreshold"
type="number" @input="handleLowerThresholdInput" />
<input class="uni-list-cell-input" type="number" :value="lowerThreshold" @input="handleLowerThresholdInput" />
</view>
<view class="uni-common-pb"></view>
<view class="uni-slider">
<view class="uni-list-cell uni-list-cell-padding">
<button type="primary" class="button" @click="handleScrollIntoView">
滚动到id为`item3`的子视图
</button>
</view>
<view class="uni-common-pb"></view>
<view class="uni-list-cell uni-list-cell-padding">
</view>
</scroll-view>
</view>
</template>
......@@ -123,7 +119,7 @@
},
changeDirectionX() {
this.scrollX = !this.scrollX;
if(this.scrollX) {
if (this.scrollX) {
this.scrollY = false
}
this.scrollTop = 0;
......@@ -131,7 +127,7 @@
},
changeDirectionY() {
this.scrollY = !this.scrollY;
if(this.scrollY) {
if (this.scrollY) {
this.scrollX = false
}
this.scrollTop = 0;
......@@ -181,24 +177,24 @@
console.log("TouchMove");
},
//自动化测试专用
checkScrollHeight(): Boolean {
checkScrollHeight() : Boolean {
var element = this.$refs["scrollViewY"]
if(element != null) {
if (element != null) {
var scrollHeight = (element as Element).scrollHeight
console.log("checkScrollHeight"+scrollHeight)
if(scrollHeight > 1900) {
console.log("checkScrollHeight" + scrollHeight)
if (scrollHeight > 1900) {
return true
}
}
return false
},
//自动化测试专用
checkScrollWidth(): Boolean {
checkScrollWidth() : Boolean {
var element = this.$refs["scrollViewX"]
if(element != null) {
if (element != null) {
var scrollWidth = (element as Element).scrollWidth
console.log("checkScrollWidth---"+scrollWidth)
if(scrollWidth > 1900) {
console.log("checkScrollWidth---" + scrollWidth)
if (scrollWidth > 1900) {
return true
}
}
......@@ -210,18 +206,17 @@
<style>
.uni-margin-wrap {
height: 400rpx;
margin-left: 50rpx;
margin-right: 50rpx;
height: 200px;
margin: 0 25px 25px 25px;
}
.item {
justify-content: center;
align-items: center;
height: 400rpx;
height: 200px;
width: 100%;
background-color: azure;
border-width: 2rpx;
border-width: 1px;
border-style: solid;
border-color: chocolate;
}
......@@ -231,21 +226,17 @@
font-size: 50px;
}
.uni-list {
flex: 1;
margin: 50rpx 50rpx 0rpx 50rpx;
.uni-slider {
justify-content: center;
}
.uni-option {
height: 100rpx;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20rpx;
.uni-list-cell-input {
width: 50px;
border: 1px solid #ccc;
text-align: center;
}
.uni-slider {
padding: 30rpx;
justify-content: center;
.button {
flex: 1;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或