提交 d619a122 编写于 作者: shutao-dc's avatar shutao-dc

修改component目录下list-view 、scroll-view实例代码 scroll-y、scroll-x改为direction属性支持

上级 c3a3f49c
...@@ -7,9 +7,10 @@ ...@@ -7,9 +7,10 @@
refresher_enabled_boolean: false, refresher_enabled_boolean: false,
scroll_with_animation_boolean: false, scroll_with_animation_boolean: false,
show_scrollbar_boolean: false, show_scrollbar_boolean: false,
rebound_boolean: true, bounces_boolean: true,
scroll_y_boolean: true, scroll_y_boolean: true,
scroll_x_boolean: false, scroll_x_boolean: false,
scroll_direction: "y",
upper_threshold_input: 50, upper_threshold_input: 50,
lower_threshold_input: 50, lower_threshold_input: 50,
scroll_top_input: 0, scroll_top_input: 0,
...@@ -81,9 +82,24 @@ ...@@ -81,9 +82,24 @@
change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked }, change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },
change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked }, change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },
change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked }, change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },
change_rebound_boolean(checked : boolean) { this.rebound_boolean = checked }, change_bounces_boolean(checked : boolean) { this.bounces_boolean = checked },
change_scroll_y_boolean(checked : boolean) { this.scroll_y_boolean = checked }, change_scroll_y_boolean(checked : boolean) {
change_scroll_x_boolean(checked : boolean) { this.scroll_x_boolean = checked }, this.scroll_y_boolean = checked
change_scroll_direction()
},
change_scroll_x_boolean(checked : boolean) {
this.scroll_x_boolean = checked
change_scroll_direction()
},
change_scroll_direction() {
if(this.scroll_y_boolean && this.scroll_x_boolean || this.scroll_y_boolean) {
this.scroll_direction = "y"
} else if(!this.scroll_y_boolean && !this.scroll_x_boolean) {
this.scroll_direction = "none"
} else if(!this.scroll_y_boolean && this.scroll_x_boolean){
this.scroll_direction = "x"
}
},
confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value }, confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },
confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value }, confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },
confirm_scroll_top_input(value : number) { this.scroll_top_input = value }, confirm_scroll_top_input(value : number) { this.scroll_top_input = value },
...@@ -121,7 +137,7 @@ ...@@ -121,7 +137,7 @@
<template> <template>
<view class="main"> <view class="main">
<list-view :scroll-x="scroll_x_boolean" :scroll-y="scroll_y_boolean" :rebound="rebound_boolean" <list-view :direction="scroll_direction" :rebound="bounces_boolean"
:upper-threshold="upper_threshold_input" :lower-threshold="lower_threshold_input" :scroll-top="scroll_top_input" :upper-threshold="upper_threshold_input" :lower-threshold="lower_threshold_input" :scroll-top="scroll_top_input"
:scroll-left="scroll_left_input" :show-scrollbar="show_scrollbar_boolean" :scroll-into-view="scrollIntoView" :scroll-left="scroll_left_input" :show-scrollbar="show_scrollbar_boolean" :scroll-into-view="scrollIntoView"
:scroll-with-animation="scroll_with_animation_boolean" :refresher-enabled="refresher_enabled_boolean" :scroll-with-animation="scroll_with_animation_boolean" :refresher-enabled="refresher_enabled_boolean"
...@@ -131,7 +147,7 @@ ...@@ -131,7 +147,7 @@
@touchcancel="list_view_touchcancel" @touchend="list_view_touchend" @tap="list_view_tap" @touchcancel="list_view_touchcancel" @touchend="list_view_touchend" @tap="list_view_tap"
@longpress="list_view_longpress" @refresherpulling="list_view_refresherpulling" @longpress="list_view_longpress" @refresherpulling="list_view_refresherpulling"
@refresherrefresh="list_view_refresherrefresh" @refresherrestore="list_view_refresherrestore" @refresherrefresh="list_view_refresherrefresh" @refresherrestore="list_view_refresherrestore"
@refresherabort="list_view_refresherabort" @scrolltoupper="list_view_scrolltoupper" ref="listview" @refresherabort="list_view_refresherabort" @scrolltoupper="list_view_scrolltoupper" ref="listview"
@scrolltolower="list_view_scrolltolower" @scroll="list_view_scroll" style="width:100%;" id="listview"> @scrolltolower="list_view_scrolltolower" @scroll="list_view_scroll" style="width:100%;" id="listview">
<list-item <list-item
v-for="key in scrollData" :key="key" :id="key" @click="list_item_click" @touchstart="list_item_touchstart" v-for="key in scrollData" :key="key" :id="key" @click="list_item_click" @touchstart="list_item_touchstart"
...@@ -146,7 +162,7 @@ ...@@ -146,7 +162,7 @@
</list-view> </list-view>
</view> </view>
<scroll-view style="flex:1" :scroll-y="true"> <scroll-view style="flex:1" direction="y">
<view class="content"> <view class="content">
<boolean-data :defaultValue="false" title="设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发" <boolean-data :defaultValue="false" title="设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发"
@change="change_refresher_triggered_boolean"></boolean-data> @change="change_refresher_triggered_boolean"></boolean-data>
...@@ -155,7 +171,7 @@ ...@@ -155,7 +171,7 @@
<boolean-data :defaultValue="false" title="是否在设置滚动条位置时使用滚动动画,设置false没有滚动动画" <boolean-data :defaultValue="false" title="是否在设置滚动条位置时使用滚动动画,设置false没有滚动动画"
@change="change_scroll_with_animation_boolean"></boolean-data> @change="change_scroll_with_animation_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="控制是否出现滚动条" @change="change_show_scrollbar_boolean"></boolean-data> <boolean-data :defaultValue="false" title="控制是否出现滚动条" @change="change_show_scrollbar_boolean"></boolean-data>
<boolean-data :defaultValue="true" title="控制是否回弹效果" @change="change_rebound_boolean"></boolean-data> <boolean-data :defaultValue="true" title="控制是否回弹效果" @change="change_bounces_boolean"></boolean-data>
<boolean-data :defaultValue="true" title="允许纵向滚动" @change="change_scroll_y_boolean"></boolean-data> <boolean-data :defaultValue="true" title="允许纵向滚动" @change="change_scroll_y_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="允许横向滚动" @change="change_scroll_x_boolean"></boolean-data> <boolean-data :defaultValue="false" title="允许横向滚动" @change="change_scroll_x_boolean"></boolean-data>
<input-data defaultValue="50" title="距顶部/左边多远时(单位px),触发 scrolltoupper 事件" type="number" <input-data defaultValue="50" title="距顶部/左边多远时(单位px),触发 scrolltoupper 事件" type="number"
......
...@@ -2,20 +2,20 @@ ...@@ -2,20 +2,20 @@
<view style="flex:1;"> <view style="flex:1;">
<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-x或scroll-y属性一经设置不能动态改变。 --> <!-- 暂时分成两个方向不同的滚动视图,原因为:scroll-view组件不支持动态改变direction。 -->
<scroll-view v-if="scrollX" :scroll-x="true" :scroll-y="false" :scroll-top="scrollTop" :scroll-left="scrollLeft" <scroll-view v-if="scrollX" direction="x" :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" style="flex-direction: row;width: 100%;height: 100%;"
:show-scrollbar="showScrollbar" :rebound="rebound" @scrolltoupper="scrolltoupper" :show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewX" id="scrollViewX"> @scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewX" id="scrollViewX">
<view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items"> <view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text> <text class="uni-text">{{item.label}}</text>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view v-else :scroll-y="scrollY" :scroll-top="scrollTop" :scroll-left="scrollLeft" <scroll-view v-else direction="y" :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" :enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
:show-scrollbar="showScrollbar" :rebound="rebound" @scrolltoupper="scrolltoupper" :show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper"
@touchmove="onTouchMove" @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" style="width: 100%;height: 100%;">
<view class="item" :id="item.id" v-for="(item,_) in items"> <view class="item" :id="item.id" v-for="(item,_) in items">
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</view> </view>
<view class="uni-option"> <view class="uni-option">
<text>是否有反弹效果</text> <text>是否有反弹效果</text>
<switch :checked="rebound" @change="rebound=!rebound"></switch> <switch :checked="bounces" @change="bounces=!bounces"></switch>
</view> </view>
<view class="uni-option"> <view class="uni-option">
<text>是否开启滚动时使用动画过渡</text> <text>是否开启滚动时使用动画过渡</text>
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
items: [] as Item[], items: [] as Item[],
scrollX: false, scrollX: false,
scrollY: true, scrollY: true,
rebound: false, bounces: false,
scrollTop: 0, scrollTop: 0,
scrollLeft: 0, scrollLeft: 0,
scrollIntoView: "", scrollIntoView: "",
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view style="flex:1;"> <view style="flex:1;">
<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 scroll-y="true" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold" <scroll-view direction="y" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground" :refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling" :refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore" @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<text class="uni-subtitle-text">纵向滚动</text> <text class="uni-subtitle-text">纵向滚动</text>
</view> </view>
<view> <view>
<scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll-Y" scroll-with-animation="true" <scroll-view :scroll-top="scrollTop" direction="y" class="scroll-Y" scroll-with-animation="true"
@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"> @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
<view class="scroll-view-item uni-bg-red"><text class="text">A</text></view> <view class="scroll-view-item uni-bg-red"><text class="text">A</text></view>
<view class="scroll-view-item uni-bg-green"><text class="text">B</text></view> <view class="scroll-view-item uni-bg-green"><text class="text">B</text></view>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<text class="uni-subtitle-text">横向滚动</text> <text class="uni-subtitle-text">横向滚动</text>
</view> </view>
<view> <view>
<scroll-view class="scroll-view_H" :scroll-x="true" @scroll="scroll" :scroll-left="120"> <scroll-view class="scroll-view_H" direction="x" @scroll="scroll" :scroll-left="120">
<view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view> <view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
<view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view> <view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
<view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view> <view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册