Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
d619a122
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5994
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
d619a122
编写于
1月 10, 2024
作者:
shutao-dc
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改component目录下list-view 、scroll-view实例代码 scroll-y、scroll-x改为direction属性支持
上级
c3a3f49c
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
34 addition
and
18 deletion
+34
-18
pages/component/list-view/list-view.uvue
pages/component/list-view/list-view.uvue
+24
-8
pages/component/scroll-view/scroll-view-props.uvue
pages/component/scroll-view/scroll-view-props.uvue
+7
-7
pages/component/scroll-view/scroll-view-refresher-props.uvue
pages/component/scroll-view/scroll-view-refresher-props.uvue
+1
-1
pages/component/scroll-view/scroll-view.uvue
pages/component/scroll-view/scroll-view.uvue
+2
-2
未找到文件。
pages/component/list-view/list-view.uvue
浏览文件 @
d619a122
...
@@ -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"
...
...
pages/component/scroll-view/scroll-view-props.uvue
浏览文件 @
d619a122
...
@@ -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: "",
...
...
pages/component/scroll-view/scroll-view-refresher-props.uvue
浏览文件 @
d619a122
...
@@ -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"
...
...
pages/component/scroll-view/scroll-view.uvue
浏览文件 @
d619a122
...
@@ -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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录